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随 着 计算 机 技术 突飞猛进 的 发 展 ， 互 联网 这 一 紧密 依托 计算 机 技术 的 新 兴 事 物 走 进 
了 千家 万 户 ， 越 来 越 多 的 机 构 、 个 人 开始 建设 网 站 ， 以 互联 网 为 平台 推广 自身 的 形象 和 
产品 ， 将 其 作为 无 界 的 面向 全 世界 的 窗口 。 

网 站 的 建设 离 不 开 各 种 相关 的 专业 技术 , 包括 界面 设计 、 动画 设计 以 及 交互 开发 等 ， 
这 些 技 术 本 身 都 需要 花费 大 量 的 时 间 来 学 习 和 使 用 。 本 书 将 以 Photoshop CC、Flash CC 
以 及 Dreamweaver CC 等 最 新 版 专业 工具 为 基础 ， 详 细 介 绍 网 站 建设 所 需要 使 用 的 各 种 
专业 技术 。 


本 书 主要 内 容 : 


全 书 共 分 为 9 章 ， 通 过 大 量 的 实例 全 面 介 绍 了 网 页 设计 与 网 站 建设 过 程 中 所 需 的 各 
种 专业 技术 ， 并 阐述 了 用 户 实际 开发 中 可 能 遇 到 的 各 种 问题 ， 各 章 内 容 概 括 如 下 。 

第 1 章 作为 全 书 的 开篇 ， 介 绍 了 一 些 网 站 建设 的 基础 知识 ， 如 网 站 的 构成 、 网 站 的 
开发 标准 和 未 来 发 展 的 趋势 ,以 及 网 站 的 建设 流程 、 网 页 界面 设计 以 及 配色 的 理论 知识 。 

第 2 章 以 Photoshop CC 为 基础 ， 介 绍 了 在 网 页 界面 设计 中 常用 的 选区 、 图 层 等 
Photoshop 功能 ， 帮 助 读 者 学 习 和 了 解 基本 的 Photoshop 操作 。 

第 3 章 进一步 介绍 了 Photoshop CC 强大 的 图 像 编辑 功能 , 包括 修改 图 像 、 处 理 色 彩 、 
处 理 文本 、 绘 制图 形 和 输出 设计 方案 ， 实 现 完整 的 界面 设计 。 

第 4 章 以 Flash CC 为 基础 ， 介 绍 了 创建 动画 、 绘 制 矢量 图 形 、 编 辑 矢量 图 形 、 操 作 
图 形 对 象 和 矢量 文本 的 基础 知识 ， 帮 助 读者 了 解 Flash 矢量 图 形 的 绘制 方法 。 

第 5 章 进一步 介绍 了 Flash CC 的 交互 动画 制作 功能 ， 包 括 使 用 各 种 动画 元 件 、 应 用 
滤 镜 、 制作 内 插 动画 和 复杂 动画 的 方法 , 使 读者 在 学 习 后 能 够 掌握 网 页 动画 的 制作 方法 。 

第 6 章 以 Dreamweaver CC 为 基础 ， 介 绍 了 建立 网 站 和 网 页 的 基本 方法 ， 以 及 处 理 
网 页 文本 、 网 页 图 像 、 超 链接 的 基本 网 页 制作 技术 。 

第 7 章 首先 介绍 了 HIML 5 结构 语言 的 一 些 基本 知识 ,其 次 依托 HTML 5 结构 语言 ， 
介绍 了 以 结构 化 的 方式 处 理 文本 、 列 表 、 表 格 和 多 媒体 内 容 的 方法 。 

第 8 章 首 先 简单 介绍 了 CSS 技术 的 基础 知识 以 及 CSS 3.0 的 新 增 功能 。 其 次 ， 统 一 
介绍 了 CSS 的 选择 器 、 选 择 方法 ， 以 及 通过 Dreamweaver 来 设计 CSS、 应 用 样式 以 及 实 
现 过 渡 动 画 的 方法 。 

第 9 章 仍然 以 Dreamweaver 的 可 视 化 技术 为 基础 ， 介 绍 了 表单 以 及 各 种 网 页 交互 控 
件 的 使 用 方法 。 


本 书 特色 : 


本 书 结合 网 页 设计 与 制作 用 户 的 需求 ， 详 细 介绍 了 网 页 设计 与 网 站 制作 的 各 种 具体 
应 用 知识 ， 具 有 以 下 特色 。 
口 丰富 实例 本 书 每 章 以 实例 形式 演示 网 页 设计 与 网 站 制作 的 应 用 知识 , 便于 读者 


模仿 、 学 习 操 作 ， 同 时 也 方便 教师 组 织 授课 。 

口 思考 与 练习 ”扩展 联系 测试 读者 对 本 章 所 介绍 内 容 的 掌握 程度 , 上 机 练习 理论 结 
合 实际 ， 引 导 学 生 提 高 上 机 操作 能 力 。 

适合 读者 


本 书 定位 于 各 大 中 专 院 校 、 职 业 学 校 以 及 各 类 培训 学 校 之 网 页 设计 与 网 站 制作 教材 ， 
并 可 用 于 不 同 层次 的 网 页 设计 爱好 者 、 专 业 技 术 人 员 等 作为 自学 参考 用 书 。 

除了 封面 署名 人 员 之 外 ， 参 与 本 书 编写 的 人 员 还 有 李 海 庆 、 王 咏 梅 、 王 黎 、 汤 莉 、 
倪 宝 童 、 赵 俊昌 、 康 显 丽 、 方 宁 、 郭 晓 俊 、 杨 宁 宁 、 王 健 、 连 彩霞 、 丁 国庆 、 牛 红 惠 、 
石 舌 、 王 慧 、 李 卫 平 、 张 丽 莉 、 王 丹 花 、 王 超 英 、 王 新 伟 等 。 在 本 书 编写 过 程 中 难免 会 
有 漏洞 ， 欢 迎 读者 通过 清华 大 学 出 版 社 网 站 www.tup.tsinghua.edu.cn 与 我 们 联系 ， 帮 助 
我 们 改正 提高 。 
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分 ， 即 面向 终端 用 户 的 网 站 前 端 ， 以 及 面向 服务 器 和 底层 数据 的 网 站 后 端 。 在 实际 的 开 
发 中 ， 前 端 和 后 端 分 别 承 载 了 以 下 功能 。 


1. 网 站 前 端 


网 站 前 端 是 由 Web 浏览 器 解析 , 由 终端 用 户 下 载 到 本 地 执行 和 解析 的 程序 。 在 整个 
网 站 平台 中 ， 网 站 前 端 主要 用 于 实现 以 下 几 种 功能 。 

口 显示 内 容 

网 站 建设 的 目的 即 向 终端 用 户 展示 信息 内 容 ， 包 括 各 种 文本 、 图 像 、 音 频 、 视 频 
和 动画 等 。 除 此 之 外 ， 还 包括 基于 超 文 本 技术 的 链接 等 ， 以 实现 信息 内 容 之 间 的 承接 
关系 。 

口 显示 效果 

在 提供 显示 内 容 时 , 网 站 还 应 支持 为 这 些 显示 内 容 进 行 美化 , 提供 各 种 样式 效果 等 。 
如 文本 的 尺寸 、 字 体 、 前 景色 、 背 景色 ， 图 像 的 阴影 、 边 框 等 。 使 用 这 些 效果 的 目的 是 
突出 局 部 显示 内 容 ， 或 将 显示 内 容 以 更 加 美观 的 方式 展示 给 终端 用 户 。 

口 捕获 交互 

网 站 与 传统 媒体 相 比 ， 其 本 身 具 有 强大 的 互动 功能 ， 这 些 互动 功能 就 是 通过 捕获 用 
户 的 操作 ， 并 提供 相关 的 反馈 来 实现 的 。 现 代 的 网 站 支持 捕获 用 户 的 鼠标 操作 、 键 盘 操 
作 、 触 屏 操作 甚至 体感 操作 ， 通 过 这 些 丰 富 的 交互 操作 帮助 终端 用 户 获 得 更 佳 的 操作 体 
验 ， 以 及 更 加 便捷 的 信息 获取 方式 等 。 

口 反馈 数据 

用 户 对 网 站 页 面 进行 的 任何 操作 都 会 产生 数据 ， 例 如 单 击 了 某 个 按钮 ， 输 入 了 某 些 
内 容 ， 以 及 选择 了 一 些 选 项 等 。 这 些 数据 对 网 站 的 运 维和 用 户 交 互 响应 往往 具有 重要 的 
作用 。 网 站 前 端的 重要 功能 就 是 收集 这 些 数据 , 然后 通过 表单 提交 或 Ajax 异步 数据 交互 
技术 等 将 其 传递 给 网 站 后 端 。 


2. 网 站 后 端 


网 站 后 端 是 指 网 站 平台 中 后 台数 据 库 、 服 务 器 端 ， 用 于 存储 数据 和 为 前 端 提供 显示 
的 基础 数据 的 功能 模块 。 网 站 后 端 主要 负责 管理 和 维护 ， 以 及 为 网 站 前 端 功能 模块 提供 
网 站 的 各 种 准确 数据 。 网 站 后 端 通常 用 于 实现 以 下 几 种 功能 。 

口 账户 及 权限 管理 

网 站 后 端的 使 用 和 维护 通常 仅 由 网 站 的 管理 员 以 及 各 种 其 他 分 工 的 工作 人 员 完 成 ， 
因此 为 保障 整个 系统 的 安全 运行 ,需要 通过 鉴 权 口 令 的 方式 为 站 点 的 各 种 操作 角色 加 密 ， 
保障 所 有 对 网 站 的 操作 都 是 在 符合 管理 规范 的 情况 下 进行 ， 防 止 越权 和 非法 提 权 操作 。 

口 站 点 内 容 管理 

网 站 后 端的 主要 工作 即 维护 为 网 站 前 端 提供 的 各 种 信息 数据 ， 例 如 站 点 的 新 闻 、 产 
品 、 各 种 分 类 信息 以 及 公示 的 公告 等 。 这 些 内 容 的 管理 模块 即 站 点 内 容 管理 模块 。 

口 数据 库 管理 

数据 库 是 一 种 用 来 存储 、 操 作 和 管理 数据 的 工具 软件 。 绝 大 多 数 网 站 都 需要 采用 数 
据 库 来 管理 各 种 数据 信息 ， 以 通过 动态 来 更 新 站 点 的 内 容 。 网 站 后 端 用 来 操作 数据 库 的 
模块 即 数据 库 管理 模块 。 


3. 网 站 项 目的 协作 


传统 的 网 站 项 目 开发 更 加 注重 的 是 后 端 程序 的 稳定 性 和 安全 性 ， 开 发 的 重心 始终 在 
后 端 编程 语言 (如 PHP、Java、C# 等 ) 和 数据 库 系 统 (如 MySQL、SQL Server、Oracle 
等 ) ， 这 类 网 站 在 开发 上 往往 由 后 端 工程 师 结合 设 计 师 协作 ， 往 往 在 前 端 开发 方面 更 加 
注重 界面 的 美观 ， 对 用 户 交 互 体验 的 重视 程度 不 足 。 

现代 的 网 站 项 目 更 加 注重 用 户 交互 体验 ， 相 比 传统 的 网 站 ， 其 开发 的 重心 逐渐 由 后 
端 转移 至 前 端 ， 加 大 了 对 前 端 界面 和 交互 脚本 的 开发 力度 ， 逐 步 重 视 起 各 种 实现 前 端 效 
果 和 响应 的 编程 语言 。 

这 类 网 站 相 比 传统 网 站 ， 需 要 专门 的 前 端 开发 者 来 解决 前 端的 内 容 显 示 以 及 用 户 界 
面 交 互 问题 ， 从 而 形成 了 界面 设计 师 、 前 端 工程 师 和 后 端 工程 师 三 方面 协作 的 局 面 。 本 
书 在 内 容 上 就 重点 介绍 前 端 工程 师 所 需 的 各 种 专业 知识 与 相关 技术 。 


网 站 前 端 是 网 站 系统 中 面向 终端 用 户 的 界面 ， 在 开发 网 站 前 端 时 ， 开 发 者 需要 结合 
多 种 标准 化 的 技术 标准 ， 包 括 网 站 前 端 结构 标准 、 样 式 标准 以 及 行为 标准 等 。 


1. 网 页 结构 标准 


网 页 结构 标准 用 于 展示 网 站 前 端的 内 容 ， 目 前 广泛 被 支持 的 结构 标准 主要 包括 
XHTML 结构 语言 与 HIML 5 结构 语言 等 。 

(1) XHTML 结构 语言 

XHTML (eXtensible HyperText Markup Language， 可 扩展 的 超 文 本 标记 语言 ) 是 基 
于 传统 的 HTML 发 展 而 来 ， 并 以 XML (eXtensible Markup Language， 可 扩展 的 标记 语 
言 ) 的 严格 规范 重新 订 制 的 结构 语言 。 

在 2000 年 1 月 26 日 , XHTML 语言 正式 被 W3C (World Wide Web Consortium， 国 
际 万 维 网 协会 ， 一 个 非 政 府 的 万 维 网 标准 制订 和 推广 组 织 ) 发 布 和 提交 给 ISO 
(International Organization for Standardization， 国 际 标准 化 组 织 ) ， 成 为 网 页 设计 的 国际 
标准 化 开发 语言 ， 替 代 了 早期 的 HIML 3.2 和 HIML 4.0。 

XHTML 语言 的 特点 是 严谨 和 具有 严格 的 结构 与 书写 格式 ， 因 此 在 被 各 种 设备 和 软 
件 解析 时 更 加 高 效 和 便捷 。 同 时 ，XHTML 还 具有 较 强 的 扩展 性 ， 可 以 为 各 种 不 同类 型 
的 终端 设备 所 支持 。 同 时 ，XHTML 在 绝 大 多 数 语 法 和 标记 的 使 用 上 都 能 够 兼容 传统 的 
HIML， 因 此 一 经 推出 立即 为 业界 所 接受 ， 并 被 迅速 大 范围 应 用 。 

(2) HTML 5 结构 语言 

HIML 5 结构 语言 是 一 种 基于 XML 和 HIML 4 衍生 而 来 的 全 新 结构 化 语言 。 相 比 
传统 的 XHTML，HIML 5 最 大 的 特点 就 是 采用 了 全 语义 化 的 设计 ， 通 过 大 量 新 增 的 语 
义 化 标记 来 规范 页 面 内 容 , 防止 XHTML 存在 的 DIV 布局 包 打 天 下 的 问题 。 这 样 的 设计 ， 
可 以 让 开发 者 更 方便 地 对 文档 内 的 内 容 进 行 分 类 处 理 ， 也 可 以 帮助 搜索 引擎 更 快 地 检索 
页 面 的 内 容 。 
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HTML 5 结构 语言 于 2006 年 立项 , 由 W3C 和 WHATWG(CWeb Hypertext Application 
Technology Working Group，Web 超 文 本 技术 工作 小 组 ) 共同 开发 完成 。 作 为 XHTML 1.0 
的 未 来 代替 者 ，HTML 5 目前 已 完成 大 部 分 草案 ， 其 部 分 功能 已 为 一 些 较 新 的 Web 浏览 
器 所 支持 。HTML 5 的 草案 设计 基于 以 下 原则 。 

口 减少 对 外 部 插件 的 需求 HITML 5 内 置 了 许多 交互 功能 ， 提 供 了 Cavas 标记 来 实 

现 失 量 图 形 绘制 ， 并 计划 在 Web 浏览 器 中 内 置 视频 音频 的 编 解码 工具 ， 从 而 减 
少 对 第 三 方 插件 ( 例如 Flash、Silver Light 等 ) 的 依赖 , 希望 未 来 通过 纯净 的 Web 
浏览 器 就 能 实现 功能 。 

口 取代 脚本 的 标记 HTML 5 提供 了 多 种 之 前 必须 由 脚本 语言 实现 的 功能 ， 以 减少 
前 端 开发 者 的 负担 ， 增 强 Web 页 的 交互 性 。 

口 独立 于 设备 以 外 HTML 5 本 身 与 设备 无 关 , 即 不 需要 根据 播放 Web 页 的 设备 来 
单独 编写 新 的 Web 页 。 一 个 HIML 5 的 页 面 可 适应 绝 大 多 数 设备 (XHTML 为 
了 适应 手持 设备 ， 专 门 开发 了 一 个 XHTML Mobile 语言 )。 

口 仍然 基于 DOM 为 提高 兼容 性 ， 并 适应 过 去 旧 有 版 本 的 JavaScript、CSS， 在 
HTML 5 中 仍然 基于 DOM 设计 , 因此 , 旧 有 的 DOM 对象、 方法 和 属性 在 HTML 
5 中 仍然 可 以 使 用 ， 此 处 还 降低 了 开发 者 的 学 习 曲 线 。 


2. 网 页 样式 标准 


早期 的 Web 应 用 是 通过 HTML 不 完善 的 表现 描述 功能 实现 Web 元素 的 样式 变换 的 。 
由 于 HTML 功能 的 局 限 性 ,一 些 Web 浏览 器 的 开发 者 发 明了 各 种 样式 表现 语言 来 对 Web 
元 素 进行 增强 描述 ， 使 得 样式 描述 语言 越 来 越 混乱 。 

1994 年 ， 同 在 欧洲 原子 能 研究 组 工作 的 哈 康 * 列 (Hakon Wium Lie) 、 蒂 姆 伯 纳 斯 - 
李 萎 士 (Sir Tim Berners-Lee〉 以 及 罗伯特 * 卡 里 奥 (Robert Cailliau) 结合 之 前 已 经 被 使 
用 的 各 种 样式 语言 ， 共 同 研究 和 发 明了 一 种 全 新 的 样式 描述 语言 CSS (Cascading Style 
Sheets, 层 肥 样式 表 ), 通过 选择 器 -样式 代码 的 键 值 对 方式 来 描述 Web 页 面 的 各 种 元 素 。 

1995 年 , 哈 康 列 对 外 正式 发 布 了 CSS 样式 表 语 言 ， 并 和 W3C 进行 了 讨论 , 对 CSS 
样式 表 语 言 进行 了 修订 ， 使 其 更 加 符合 Web 语言 的 特性 。 

1996 年 , CSS 样式 表 语 言 的 第 一 版 正式 完成 , 并 于 当年 12 月 发 布 , 被 称 作 CSS 1.0。 
该 语言 推出 后 , 并 未 被 广泛 采用 。 世界 上 第 一 款 完全 支持 CSS 1.0 的 Web 浏览 器 是 2000 
年 微软 公司 开发 的 运行 于 Macintosh 系统 的 Intemet Explorer 5.0。 随 后 ， 随 着 Internet 
Explorer 版 本 的 升级 和 市 场 份额 的 逐渐 扩大 ，CSS 1.0 才 被 得 以 广泛 使 用 。 

W3C 在 1998 年 5 月 发 布 了 更 新 的 CSS 2.1 规范 , 修改 了 CSS 1.0 的 一 些 错误 和 不 被 
支持 的 内 容 ， 并 增加 了 一 些 已 经 被 多 种 Web 浏览 器 添加 的 扩展 内 容 ， 但 是 时 至 今日 ， 尚 
未 有 任何 一 款 Web 浏览 器 完全 支持 所 有 CSS 2.1 的 内 容 (虽然 CSS 2.1 是 当前 的 事实 
标准 ) 。 

CSS 的 更 新 版 本 CSS3.0 于 1999 年 开始 制订 ,但 由 于 其 发 展 方向 不 断 被 修改 和 订正 ， 
直到 2011 年 6 月 ， 其 才 为 W3C 的 CSS 发 展 小 组 发 布 ， 成 为 公开 的 Web 开发 标准 。 最 
新 的 Web 浏览 器 已 经 开始 逐步 支持 CSS 3.0 的 各 种 功能 。 当 前 绝 大 多 数 最 新 版 本 的 Web 
浏览 器 都 已 经 能 够 正确 地 显示 绝 大 多 数 由 CSS 3.0 开发 的 各 种 网 站 的 界面 效果 。 


3. 网 页 行为 标准 


早期 的 Web 应 用 通过 HIML 的 表单 元 素来 实现 与 用 户 的 交互 和 简单 的 行为 。 随 着 
户 交互 的 日 趋 复杂 , 各 种 Web 浏览 器 都 采用 了 基于 自身 而 设计 的 脚本 语言 来 实现 更 加 
复杂 的 Web 行为 ， 例 如 Netscape Navigator 浏览 器 采用 的 是 Netscape 公司 和 Sun 公司 
发 的 JavaScript， 而 Internet Explorer 则 采用 的 是 微软 公司 开发 的 VBScript 脚本 语言 。 

这 些 不 同 的 脚本 语言 的 采用 , 直接 导致 了 Web 应 用 的 兼容 性 灾难 , 采用 不 同 脚本 的 
Web 应 用 仅 能 获得 某 一 种 Web 浏览 器 的 支持 , 在 另 一 种 Web 浏览 器 中 则 完全 无 法 使 用 。 
基于 此 ， 开 发 者 们 必须 选择 一 种 脚本 ， 或 花费 大 量 时 间 和 精力 学 习 和 使 用 多 种 脚本 才能 
实现 完全 兼容 。 

1996 年 8 月 ,为 了 使 Web 浏览 器 获得 更 强 的 兼容 性 , 微软 公司 为 其 Intemet Explorer 
浏览 器 引入 了 JScript 脚本 语言 , 这 种 脚本 语言 在 语法 和 解析 方面 实际 上 与 Netscape 公司 
和 Sun 公司 开发 的 JavaScript 语言 基本 一 致 , 可 以 被 看 作 是 JavaScript 脚本 语言 的 微软 版 
本 。JScript 脚本 语言 的 诞生 ,真正 使 正 浏览 器 能 够 同时 兼容 多 种 脚本 ， 这 一 举措 获得 了 
极 大 的 成 功 ， 同 时 也 推动 了 标准 化 的 Web 脚本 语言 的 诞生 。 

1996 年 11 月 , Netscape 公司 正式 将 JavaScript 脚本 语言 提交 给 当时 的 ECMA 国际 ， 
希望 将 该 脚本 语言 正式 申请 为 国际 化 标准 。ECMA 国际 于 1997 年 6 月 正式 采纳 该 脚本 
语言 ， 并 制订 基于 ECMA-262 的 国际 标准 ， 从 此 ，JavaScript 正式 取代 了 其 他 脚本 语言 ， 
成 为 Web 开发 的 标准 化 语言 ， 几 乎 所 有 Web 浏览 器 厂商 都 围绕 ECMA-262 标准 开发 了 
基于 自身 软件 的 JavaScript 子 集 ， 以 与 ECMA 官方 标准 接轨 。ECMA-262 标准 迄今 为 止 
发 展 出 了 6 个 主要 的 版 本 ， 其 特点 如 表 1-1 所 示 。 

3 表 1-1 ,ECMA-262 发 展 而 来 的 版 本 


初始 版 本 

格式 修正 ， 使 其 符合 ISOTEC16262 国际 标准 

增加 正则 表达 式 、 语 法 作用 域 链 处 理 、 新 的 控制 指令 、 异 常 处 理 ， 错 误 
定义 以 及 数据 输出 格式 化 等 改进 

该 版 本 被 放弃 ， 其 部 分 功能 被 引入 第 5 版 ， 其 中 部 分 用 于 XML 的 读 写 
功能 被 一 些 厂商 使 用 ， 称 为 E4X 

新 增 严格 模式 strict mode, 更 彻底 的 错误 检查 机 制 、 对 第 3 版 更 加 细 化 、 
增加 部 分 新 功能 如 getters、setters， 支 持 JSON 对 象 和 更 完整 的 反射 
完全 参照 ISOTEC16262:2011 国际 标准 制订 语法 和 格式 


除 以 上 5 个 ECMA 版 本 外 ， 第 6 版 和 第 7 版 正在 紧张 制订 中 。 未 来 的 ECMAScript 
脚本 将 增加 更 多 新 的 概念 及 语言 特性 。 


1999 年 12 月 


未 发 布 


传统 的 Web 已 经 发 展 了 20 余年 ， 在 这 期 间 ，Web 技术 本 身 经 历 了 三 次 大 的 技术 和 
E 念 革命 ， 包 括 以 动态 交互 Web 页 为 标志 的 Web 应 用 程序 革命 ， 以 Web 2.0 技术 为 标 
志 的 多 元 化 信息 发 布 来 源 革命 ， 以 及 以 Adobe、Microsoft、Apple 和 Google 等 互联 网 公司 
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为 主导 的 、 以 富 媒 体 应 用 的 出 现 为 标志 的 富 媒 体 革命 。 
未 来 的 Web 将 走向 何方 一 直 是 业界 和 学 者 的 重要 研究 方向 。 从 目前 趋势 来 看 ,未 来 
的 Web 将 具有 以 下 发 展 趋势 : 


1. 便携 化 


随 着 现代 人 类 生活 节奏 的 不 断 加 快 ， 智 能 手机 、 平 板 电脑 等 手持 设备 的 不 断 普及 ， 
用 户 花 费 在 地 铁 、 公 交 等 交通 工具 上 的 时 间 不 断 增加 ， 而 花费 在 家 庭 娱乐 上 的 时 间 不 断 
减少 , 因此 传统 的 家 庭 用 户 使 用 台式 计算 机 上 网 的 方式 将 不 再 成 为 Web 为 用 户 的 主流 服 
务 方式 。 

未 来 的 Web 将 更 加 便携 , 用 户 可 以 通过 随身 的 智能 手机 和 平板 电脑 等 手持 智能 设备 
浏览 Web， 使 用 Web 提供 的 各 种 服务 。 因 此 ， 在 未 来 Web 的 开发 中 ， 除 了 需要 考虑 普 
通 台式 机 、 工 作 站 的 用 户 ， 还 需要 多 考虑 各 种 手持 设备 用 户 ， 针 对 手持 设备 的 特点 进行 
设计 。 

2. 智能 化 


早期 的 传统 Web 页 往往 只 能 展示 静态 的 内 容 , 或 由 数据 库 系 统 查 询 所 得 的 简单 动态 
内 容 。 然 而 随 着 用 户 体验 的 要 求 逐渐 增高 ,用 户 对 Web 交互 性 和 智能 性 的 要 求 越 来 越 高 。 
越 来 越 多 的 现代 Web 页 采用 JavaScript、Flash 等 交互 技术 来 提高 Web 页 的 交互 性 ， 建 
立 富 交互 性 的 Web 页 。 

在 AJAX 技术 出 现 后 , 更 多 的 Web 开发 者 通过 这 一 技术 来 实现 丰富 的 交互 行为 , 反 
馈 用 户 的 操作 ， 使 Web 页 更 加 智能 化 。 未 来 的 Web 将 比如 今 的 Web 更 加 智能 化 ， 因 此 
在 未 来 开发 Web 页 时 ， 应 充分 考虑 所 有 用 户 交 互 操作 ， 针 对 性 地 编写 响应 操作 的 代码 。 


3. 娱乐 化 


传统 的 Web 页 往往 只 能 展示 简单 的 静态 文档 ， 提 供 各 种 学 术 性 、 技 术 性 的 信息 ， 这 
也 是 Web 最 初 设计 的 初 囊 。 然 而 随 着 Web 技术 的 发 展 ， 以 及 可 访问 Web 页 的 设备 的 普 
及 ， 越 来 越 多 普通 的 用 户 来 使 用 Web。 未 来 的 Web 将 不 再 仅 用 于 学 术 和 技术 ， 而 是 逐 
步 走向 开放 ， 走 向 富 资源 化 、 富 媒体 化 ， 为 普通 人 服务 ， 向 普通 用 户 提供 多 媒体 的 交互 
娱乐 体验 。 


1.2 ”网 站 建设 的 流程 


在 互联 网 发 展 的 初期 ， 绝 大 多 数 网 站 都 是 由 后 端 程序 员 来 开发 ， 其 开发 流程 与 传统 
的 桌面 应 用 程序 十 分 类 似 ， 都 是 先 确定 网 站 的 需求 和 功能 ， 然 后 再 决定 数据 库 结构 以 及 
后 端 应 用 程序 的 架构 。 最 终 ， 将 编写 程序 的 代码 和 数据 库 中 的 内 容 呈献 到 用 户 界 面 〈 在 
网 站 中 ， 用 户 界 面 就 是 网 页 ) 中 。 

网 站 的 用 户 界 面 一 一 网 页 必须 依赖 用 户 计算 机 中 的 Web 浏览 器 来 解析 的 。 由 于 早期 
的 Web 浏览 器 功能 较 弱 ， 因 此 网 站 的 开发 者 在 开发 用 户 界面 上 更 加 注重 贴图 的 美观 ,而 
不 注重 用 户 交互 性 和 便捷 性 。 网 页 的 最 主要 功能 也 随 之 被 限制 为 显示 内 容 。 

随 着 现代 互联 网 技术 的 发 展 以 及 计算 机 软件 技术 日 新 月 异 的 变化 , 如 今 的 Web 浏览 


器 已 经 从 过 去 简单 的 内 容 展示 平台 逐渐 演变 为 重要 的 互联 网 入 口 ， 越 来 越 多 全 新 的 技术 
被 应 用 到 Web 浏览 器 中 ， 例 如 异步 数据 通信 、 矢 量 图 形 绘制 、 硬 件 加 速 、 三 维 图 形 接 
等 新 技术 都 在 不 断 增 强 Web 浏览 器 的 功能 。 这 些 新 技术 的 应 用 将 网 站 建设 的 重心 转移 到 
了 用 户 交互 体验 上 来 , 现代 网 站 的 建设 , 已 经 完全 脱离 了 传统 桌面 应 用 程序 开发 的 榨 覆 ， 
以 全 新 的 流程 凸显 了 互联 网 开发 的 特色 。 

典型 的 网 站 项 目 是 一 项 涵盖 营销 学 、 平 面 艺 术 、 编 程 与 数据 库 开发 、 计 算 机 网 络 应 
用 等 多 个 领域 的 综合 系统 工程 ， 其 主要 包括 网 站 的 前 期 策划 、 中 期 制作 和 后 期 维护 三 个 
阶段 。 


在 进行 商业 项 目 运作 时 ， 首 先 应 有 一 个 合理 的 策划 流程 ， 对 市 场 进行 调研 、 分 析 ， 
并 为 商业 项 目 进行 各 种 资源 整理 工作 。 网 站 建设 也 不 外 如 此 ， 其 可 分 为 三 个 阶段 。 


1. 前 期 调研 


在 建立 网 站 之 前 ， 首 先 应 通过 各 种 调查 活动 ， 确 定 网 站 的 整体 规划 ， 并 对 网 站 所 要 展 
示 的 内 容 进 行 基本 的 归纳 。 网 站 策划 的 调查 活动 应 围绕 三 个 主要 方面 进行 ， 即 用 户 需求 调 
查 、 竞 争 对 手 情况 调查 以 及 企业 自身 情况 调查 ， 分 别针 对 三 个 不 同 的 对 象 进行 资料 收集 。 


2. 内 容 策划 


在 调查 活动 完成 后 ， 企 业 还 需要 对 调查 的 结果 进行 数据 整合 与 分 析 ， 整 理 所 获得 的 
数据 ， 将 数据 转换 为 实际 的 结果 ， 从 而 定位 网 站 的 内 容 、 划 分 网 站 的 栏目 等 。 同 时 ， 还 
应 根据 企业 自身 的 技术 状况 ， 确 定 网 站 所 使 用 的 技术 方案 。 

网 站 的 栏目 结构 划分 ， 标 准 应 尽量 符合 大 多 数 人 理解 的 习惯 。 例 如 ， 一 个 典型 的 企 
业 网 站 栏目 ， 通 常 包括 企业 的 简介 、 新 闻 、 产 品 ， 用 户 的 反馈 ， 以 及 联系 方式 等 。 产 品 
栏目 还 可 以 再 划分 更 多 的 子 栏目 。 

在 确定 网 站 所 使 用 的 技术 方案 时 ， 应 根据 企业 自身 的 运营 情况 和 技术 能 力 进 行 选 
择 。 切 记 符合 企业 自身 情况 的 技术 才 是 最 合适 的 技术 。 


3. 资源 搜集 


在 确定 了 网 站 的 内 容 后 ， 即 可 针对 这 些 内 容 需 求 来 搜集 网 站 需要 共享 发 布 的 资源 ， 
其 包括 但 不 仅 包 括 各 种 文本 、 图 像 、 动 画 、 声 音 和 视频 等 ， 将 其 分 门 别 类 整理 以 备 使 用 。 

除了 搜集 外 部 的 资源 外 ， 原 创 性 的 网 站 还 需要 根据 实际 的 需求 自行 制作 或 购买 一 些 
必要 的 资源 。 例 如 图 书 类 网 站 ， 需 要 采购 图 书 的 内 容 版 权 ， 音 视频 类 网 站 需要 采购 音 视 
频 类 资源 的 内 容 版 权 等 。 

资源 的 搜集 并 非 一 个 简单 的 过 程 ， 如 果 开发 者 希望 网 站 能 够 拥有 持久 的 生命 力 ， 则 
应 不 断 地 搜集 、 制 作 和 采购 新 的 资源 ， 不 断 将 新 的 资源 提供 给 用 户 。 


网 站 制作 工作 是 网 站 建设 的 核心 。 承接 网 站 策划 的 结果 , 综合 资源 整理 获取 的 素材 ， 


进行 网 页 的 界面 设计 、 前 端 开发 和 后 端 开发 ， 除 此 之 外 ， 还 需要 对 开发 的 程序 进行 各 种 
测试 ， 保 障 程序 能 够 在 用 户 客 户 端正 常 地 执行 。 网 站 的 中 期 制作 主要 分 为 界面 设计 、 前 
端 开发 和 后 端 开发 三 个 步骤 ， 其 中 前 两 个 步骤 所 使 用 的 技术 正 是 本 书 所 需要 向 读者 介绍 
的 内 容 。 

1. 界面 设计 


网 站 通过 用 户 界面 来 向 用 户 提供 服务 ， 用 户 界面 设计 的 优 劣 直接 影响 终端 用 户 对 网 
站 的 印象 和 体验 。 

界面 设计 又 可 以 分 为 原型 设计 、 界 面 美化 、 交 互 设 计 等 三 个 步骤 。 其 中 ， 原 型 设计 
用 于 定义 网 站 的 页 面包 含 哪些 元 素 ， 这 些 元 素 应 显示 哪些 内 容 ， 最 终 形成 网 站 界面 的 原 
型 设计 图 。 原 型 设计 通常 使 用 的 软件 有 微软 公司 开发 的 Visio， 以 及 Axure 公司 开发 的 
Axure RP 等 。 

界面 美化 是 指 对 原型 设计 图 中 的 各 种 元 素 以 及 整个 界面 的 背景 增加 皮肤 、 特 效 、 边 
框 、 背 景 等 设计 效果 ， 使 其 能 够 更 加 美观 。 界 面 美化 常用 的 软件 包括 Adobe 公司 出 品 的 
Fireworks 和 Photoshop 等 。 

交互 设计 用 于 确定 界面 元 素 在 与 用 户 交 互 过 程 中 的 响应 方式 以 及 响应 效果 ， 决 定 网 
站 的 用 户 界面 如 何 为 用 户 服务 。 在 进行 交互 设计 时 ， 开 发 者 可 以 借助 微软 公司 的 Excel 
等 电子 表格 工具 枚 举 出 所 有 需要 交互 的 元 素 ， 然 后 依次 定义 交互 元 素 所 需要 实现 的 交互 
效果 。 


2. 前端 开 发 


在 完成 界面 设计 之 后 ， 即 可 着 手 界 面 设 计 的 应 用 化 ， 即 将 设计 完成 的 界面 原型 图 、 
效果 设计 图 、 交 互 设计 图 实现 为 具体 的 代码 。 前 端 开 发 通常 也 需要 三 个 步骤 ， 即 页 面 结 
构 的 开发 、 样 式 的 开发 以 及 交互 的 开发 。 

页 面 结构 的 开发 需要 使 用 到 XHTML、HTML 5 等 结构 语言 (具体 选择 哪 种 结构 语 
言 应 根据 目标 客户 的 Web 浏览 器 类 型 来 决定 ) 来 定义 网 页 文档 的 整体 结构 以 及 需要 显示 
的 内 容 数 据 。 

页 面 样式 的 开发 需要 使 用 CSS 样式 表 来 针对 XHTML 或 HTML 5 结构 编写 选择 器 
并 定义 指定 Web 元 素 的 背景 、 边 框 、 内 容 等 实际 显示 效果 。 

页 面 交 互 的 开发 是 整个 前 端 开发 的 核心 ， 其 需要 通过 JavaScript 来 编写 各 种 实时 响 
应 或 事件 触发 的 脚本 ， 定 义 每 个 脚本 需要 执行 的 业务 功能 。 一 些 激进 的 开发 项 目 甚至 完 
全 使 用 JavaScript 来 控制 整个 项 目的 业务 流 ， 处 理 很 多 传统 项 目 必 须 依 赖 后 端 程序 实现 
的 功能 。 


3. 后 端 开 发 


网 站 的 运营 以 及 为 用 户 进行 各 种 服务 ， 依 赖 于 一 个 运行 稳定 、 高 效 的 后 端 程序 ， 以 
及 一 个 结构 合理 的 数据 库 系 统 。 

后 端 程序 开发 的 工作 ， 就 是 根据 前 台 界 面 的 需求 ， 通 过 程序 代码 动态 地 提供 各 种 服 
务 信息 。 除 此 之 外 ， 还 应 提供 一 个 简洁 的 管理 界面 ， 为 后 期 网 站 的 维护 打下 基础 。 

后 端 程序 开发 技术 发 展 十 分 迅速 ， 企 业 在 建设 网 站 时 ， 往 往 具 有 多 种 技术 方案 可 供 


选择 。 例如 Windows Server 操作 系统 +SQL Server 数据 库 +ASPNET 技术 , 或 Linux 操作 
系统 +MySQL 数据 库 +PHP 技术 等 。 

常用 的 后 端 程序 开发 语言 主要 包括 VBScript、C#、Java、Perl、PHP 等 5 种 。 其 中 ， 
VBScript 脚本 语言 主要 用 于 微软 公司 Windows 服务 器 系统 的 ASP 后 端 程序 ，C# 语 言 主 
要 用 于 微软 公司 Windows 服务 器 系统 的 ASP.NET 后 端 程序 ，Java 可 用 于 多 种 服务 器 操 
作 系 统 的 JSP 后 端 程序 ，Perl 可 用 于 多 种 服务 器 操作 系统 的 CGI 以 及 fast CGI (CGI 的 
改编 版 本 ) 后 端 程序 ，PHP 可 用 于 多 种 服务 器 操作 系统 的 PHP 后 端 程序 中 。 


在 完成 网 站 的 前 台 界 面 设 计 和 后 台 程序 开发 后 ， 还 应 对 网 站 进行 测试 、 发 布 和 维护 
等 工作 ， 进 一 步 完善 网 站 的 内 容 。 


1. 网 站 测试 


严格 的 网 站 测试 可 以 尽 可 能 地 避免 网 站 在 运营 时 出 现 种 种 问题 。 与 网 站 的 开发 类 

似 , 网 站 的 测试 也 必须 根据 实际 的 开发 类 型 和 开发 项 目 来 指定 测试 的 计划 。 通常 情况 下 ， 

现代 的 网 站 开发 测试 分 为 前 端 测试 和 后 端 测 试 。 

(1) 前 端 测试 

前 端 测 试 主要 测试 网 站 面向 用 户 端的 各 种 功能 ， 其 需要 解决 的 是 网 站 页 面 的 显示 问 

通常 情况 下 包含 以 下 几 个 项 目 。 

口 界面 测试 ”界面 测试 需要 解决 的 是 界面 内 容 和 效果 的 显示 问题 , 如 界面 的 内 容 是 
否 正常 显示 、 超 链接 是 否 有 效 ， 以 及 界面 效果 是 否 与 设计 图 的 设计 效果 一 致 等 。 
借助 界面 测试 ， 可 以 验证 前 端 开发 中 的 XHTML、HTML 以 及 CSS 等 代码 。 

口 交互 测试 ”交互 测试 需要 解决 的 是 界面 中 各 种 交互 元 素 在 触发 交互 事件 之 后 是 
否 能 够 及 时 响应 ,响应 的 效果 是 否 符合 交互 设计 的 预期 响应 的 输出 结果 是 否 正 
确 等 。 借 助 交互 测试 ， 可 以 验证 前 端 开发 中 的 JavaScript 代码 。 

口 兼容 性 测试 ”兼容 性 测试 是 指 在 完成 单一 Web 浏览 器 解析 平台 的 界面 测试 和 交 
互 测试 之 后 ， 在 常用 的 各 种 Web 浏览 器 平台 下 进一步 进行 界面 测试 和 交互 测试 。 
在 选择 兼容 性 测试 平台 时 需要 做 到 有 针对 性 , 即 针对 实际 的 用 户 群 体 调研 来 决定 
所 选 的 兼容 性 测试 平台 。 

(2) 后 端 测试 

后 端 测 试 主要 需要 解决 网 站 的 后 端 应 用 程序 以 及 数据 库 的 各 种 运行 问题 ， 因 此 其 侧 

重点 与 前 端 测试 完全 不 同 。 前 端 测 试 侧重 点 在 于 用 户 的 交互 体验 ， 而 后 端 测试 的 侧重 点 

则 更 多 地 在 于 网 站 系统 运行 的 效率 、 稳 定性 以 及 安全 性 等 方面 。 关 于 后 端 测试 在 此 将 不 

再 歼 述 。 


2.， 网 站 发 布 


在 完成 测试 后 ， 开 发 者 即 可 通过 FTP、SFTP 或 SSH 等 文件 传输 方式 ， 将 制作 完成 
的 网 站 上 传 到 服务 器 中 ， 并 开通 服务 器 的 网 络 ， 使 其 能 够 进行 各 种 对 外 服务 。 网 站 的 发 
布 还 包括 网 站 的 宣传 和 推广 等 工作 。 使 用 各 种 搜索 引擎 优 化 工具 对 网 站 的 内 容 进行 优化 ， 
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可 以 提高 网 站 被 用 户 检索 的 几率 ， 提 高 网 站 的 访问 量 。 
3. 网 站 维护 


网 站 的 维护 是 一 项 长 期 而 艰巨 的 工作 , 包括 对 服务 器 的 软件 、 硬 件 维护 ， 系 统 升级 ， 
数据 库 优化 和 更 新 网 站 内 容 等 。 


1.3 网 页 界面 设计 


网 页 界面 设计 是 由 计算 机 软件 界面 设计 衍生 而 来 的 一 个 新 生 学 科 ， 其 设计 的 优 劣 直 
接 影 响 了 网 站 用 户 的 体验 ， 在 进行 网 页 界面 设计 之 前 ， 开 发 者 首先 应 了 解 网 页 界面 的 原 
理 以 及 界面 的 各 种 设计 风格 。 


用 户 界面 (User Interface，UID)， 及 其 英文 缩 UI 就 是 目前 设计 行业 非常 流行 的 术语 ， 
是 各 种 系统 与 终端 用 户 之 间 发 生 交互 的 层 
面 ， 是 直接 面向 用 户 的 界面 。 研 究 用 户 界 
面 ， 就 是 研究 如 何 与 用 户 接触 ， 以 最 简洁 、 


最 美观 的 内 容 提供 给 用 户 。 
用 户 界面 不 仅仅 是 单纯 的 平面 图 像 和 下 
声音 ， 而 是 一 个 运作 体系 ， 是 用 户 与 设备 总 二 
交互 的 系统 。 用 户 界面 的 系统 主要 由 三 个 © tana 


部 分 组 成 ， 即 输入 接口 、 交 互 处 理 程序 和 
输出 接口 。 这 三 个 部 分 紧密 结合 而 不 可 分 
割 ， 其 工作 的 模式 如 图 1-1 所 示 。 人 7 图 1-1 .用 户 界面 的 工作 模式 


1. 输入 接口 


输入 接口 是 指 接 受用 户 发 出 信息 的 设备 或 软件 。 其 作用 是 通过 各 种 方式 采集 用 户 输 
入 的 信息 。 以 计算 机 系统 为 例 ， 输 入 接口 就 是 平常 使 用 的 各 种 键盘 、 和 鼠标 、 手 写 板 、 触 
摸 屏 、 视 频 头 以 及 话 简 等 设备 。 

用 户 输入 的 信息 往往 是 多 种 多 样 的 ， 可 以 是 简单 的 键盘 或 鼠标 输入 的 电信 号 ， 也 可 
以 是 包括 声音 、 视 频 的 多 媒体 数据 。 任 何 一 种 与 用 户 进行 交互 的 设备 或 软件 ， 都 必须 依 
靠 各 种 输入 接口 采集 用 户 的 输入 ， 才 能 进行 下 一 步 的 交互 处 理工 作 。 
输入 接口 追求 的 是 便捷 使 用 和 采集 准确 ， 为 用 户 提供 一 个 简洁 、 快 速 上 手 的 输入 接 
， 可 以 提高 用 户 对 系统 的 认同 度 ， 提 高 用 户 输入 信息 的 效率 ， 从 而 提高 系统 的 工作 
效率 。 


2. 交互 处 理 程序 


交互 处 理 程序 是 系统 中 对 用 户 输入 的 信息 进行 处 理 的 架构 部 分 ， 是 将 收集 的 用 户 输 
入 信息 转换 为 反馈 结果 的 程序 。 绝 大 多 数 的 机 械 、 计 算 机 软件 中 ， 都 存在 有 对 信息 进行 


访 


Ek 理 的 程序 或 方式 。 例 如 ， 在 使 用 计算 器 时 ， 按 下 数字 ， 则 计算 器 的 芯片 就 会 对 数字 进 
行 运算 。 这 个 运算 的 程序 ， 就 是 计算 器 的 处 理 程序 。 

交互 处 理 程序 是 用 户 界 面 系统 中 十 分 重要 的 组 成 部 分 ， 也 是 整个 用 户 界面 系统 中 的 
灵魂 。 没有 了 交互 处 理 程序 ， 则 用 户 界面 系统 也 就 不 再 是 系统 ， 而 只 能 成 为 静态 的 图 片 。 


3. 输出 接口 


输出 接口 也 是 用 户 界面 系统 中 的 重要 组 成 部 分 ， 是 整个 用 户 界面 交互 体系 中 最 后 的 
阶段 。 其 作用 是 将 交互 处 理 程序 处 理 的 反馈 结果 传输 给 用 户 , 完成 整个 用 户 交 互 的 行为 。 

以 家 庭 影院 的 用 户 界 面 系统 为 例 ， 当 系统 查找 到 用 户 点 播 的 影片 后 ， 将 影片 的 视频 
和 声音 传送 给 显示 设备 和 音响 ， 然 后 让 用 户 看 到 和 听 到 影片 的 内 容 。 这 些 显示 设备 和 音 
响 就 是 输出 信息 的 接口 。 


用 户 界 面 直接 影响 产品 的 使 用 价值 ， 对 于 用 户 而 言 ， 用 户 界面 就 是 其 对 产品 的 几乎 
所 有 了 解 。 因 此 ， 用 户 界面 的 设计 看 似 简单 ， 但 却 必 须 符合 用 户 的 实际 需求 ， 根 据 用 户 
的 多 种 情况 进行 具体 的 分 析 。 在 大 多 数 情况 下 , 用 户 对 界面 的 要 求 都 需要 符合 以 下 几 点 。 


1. 易 用 性 


在 任何 一 个 系统 中 ， 客 户 都 希望 花费 最 少 的 时 间 、 精 力 和 金钱 ， 完 成 最 多 的 任务 或 
获得 最 多 的 服务 。 能 单 击 一 次 鼠标 就 完成 的 操作 ， 用 户 绝 不 会 愿意 通过 单 击 两 次 鼠标 完 
成 。 界 面 设计 的 优化 过 程 ， 就 是 查找 为 用 户 提供 最 简单 便捷 ， 最 易 用 服务 方式 的 过 程 。 
只 有 易 用 的 系统 才 是 好 系统 。 用 户 无 法 使 用 的 功能 等 于 没有 的 功能 。 

用 户 为 何 要 访问 网 页 ? 因为 需要 网 页 提供 的 服务 。 任 何 网 页 设计 者 都 不 应 该 有 强迫 
用 户 做 一 些 操作 才能 获得 服务 的 思维 方式 ， 而 应 正确 地 引导 用 户 ， 让 用 户 自 行 选择 。 任 
何 无 意义 的 操作 ， 对 用 户 使 用 网 站 服务 的 积极 性 都 是 一 种 损害 。 

例如 ， 摆 在 用 户 面前 有 两 个 提供 类 似 服务 的 网 站 ， 其 中 一 个 用 户 只 需要 单 击 两 次 鼠 
标 即 可 得 到 需要 的 服务 ， 而 另 一 个 则 需要 用 户 填写 元 长 的 注册 信息 ， 等 待 验 证 ， 进 行 若 
干 项 与 服务 完全 没有 关系 的 操作 ， 则 很 明显 用 户 会 选择 单 击 两 次 鼠标 得 到 的 服务 。 

选择 最 易 用 的 方式 ， 才 能 有 助 于 降低 网 站 开发 运行 的 成 本 、 减 少 被 用 户 拒 绝 使 用 的 
风险 、 提 高 用 户 体验 ， 从 而 促使 用 户 使 用 网 站 的 服务 。 


2. 用 户 角度 


在 任何 网 页 界面 开发 的 工作 中 ， 都 必须 从 用 户 的 角度 来 考虑 和 解决 问题 ， 必 须 想 用 
户 所 想 ， 急 用 户 所 急 。 设 计 网 页 界面 时 ， 需 要 了 解 用 户 并 不 是 专业 人 员 ， 也 不 具备 相关 
的 专业 知识 。 因 此 在 网 页 界面 中 要 尽量 使 用 通俗 易 懂 的 语言 , 以 及 各 种 易于 理解 的 符号 。 

用 户 可 理解 的 语言 和 符号 是 一 个 宽泛 的 概念 ， 是 广泛 应 用 于 各 种 软件 界面 或 网 页 界 
面 的 各 种 语言 和 符号 的 规范 。 例 如 ， 在 绝 大 多 数 网 页 中 ， 都 以 小 屋 的 图 标 作为 网 站 的 首 
页 标志 ， 以 放大 镜 的 图 标 作为 网 页 中 搜索 引擎 的 标志 ， 以 钥匙 和 锁 表 示 密 码 等 。 

使 用 统一 而 符合 用 户 角 度 思 维 方式 的 语言 和 符号 ， 可 以 使 用 户 更 容易 理解 网 页 各 部 
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分 元 素 的 含义 ， 提 高 用 户 使 用 这 些 功 能 的 效率 。 例 如 ， 垃 圾 箱 的 图 标 表 示 回 收 站 。 因 此 ， 
在 网 页 界面 中 ， 删 除 各 种 信息 可 以 使 用 垃圾 箱 的 图 标 表示 ， 绝 大 多 数 用 户 都 可 以 理解 图 
标的 含义 。 而 如 果 使 用 一 个 粉碎 机 的 小 图 标 ， 就 很 容易 使 用 户 误解 为 打印 机 ， 从 而 影响 
用 户 使 用 。 


3. 负担 最 小 化 


在 网 页 界面 设计 中 ， 需 要 遵循 用 户 负 担 最 小 化 的 原则 ， 即 保障 用 户 在 完成 某 一 项 服 
务 时 ， 使 用 最 少 的 操作 ， 记 忆 最 少 的 内 容 ， 投 入 最 少 的 精力 。 此 时 ， 就 需要 界面 设计 者 
对 网 页 界面 进行 优化 ， 去 除 一 些 影响 用 户 操作 使 用 的 元 素 。 在 优化 界面 元 素 时 ， 需 要 遵 
循 如 下 一 些 定律 。 

(1) 742 定律 

7 士 2 定律 是 一 项 广泛 适用 于 各 种 分 类 学 的 定律 。 人 类 大 脑 处 理 和 记忆 信息 的 能 力 是 
有 限 的 。 美 国 的 心理 学 家 乔治 * 米 勒 (George A. Miller) 经 过 多 年 研究 发 现 ， 人 类 在 短期 
记忆 中 一 般 只 能 够 记 住 5 一 9 个 事物 。 
因此 ， 网 页 的 界面 设计 师 在 设计 各 种 网 页 元 素 内 容 时 ， 应 合理 地 控制 各 种 元 素 的 子 
项 目 数量 ， 以 防止 过 多 的 子 元 素数 量 给 用 户 的 记忆 力 造 成 较 大 的 负担 。 

7 土 2 定律 比较 典型 的 应 用 主要 在 网 页 的 导航 条 和 选项 卡 菜单 中 。 其 表现 为 ， 少 于 5 
个 项 目的 导航 按钮 或 选项 卡 的 菜单 往往 使 用 户 在 使 用 时 有 意犹未尽 的 感觉 ， 而 超过 9 个 
导航 按钮 或 选项 卡 的 菜单 则 往往 会 使 用 户 在 使 用 时 必须 反复 查找 按钮 或 菜单 内 容 ， 才 能 
正确 得 到 结果 ; 如 果 网 站 的 导航 按钮 或 选项 卡 的 菜单 项 目 只 有 5 一 9 个 , 则 用 户 会 很 容易 
记 起 每 一 个 项 目的 具体 位 置 ， 方 便 地 访问 这 些 项 目 内 容 。 

(2) 2 秒 定律 

2 秒 定律 是 一 种 限制 网 页 访问 时 间 的 定律 。 其 意义 在 于 ， 要 求 网 页 的 设计 者 在 设计 
网 页 界面 时 尽量 使 网 页 的 体积 更 小 , 运行 速度 更 快 , 防止 用 户 在 屏幕 前 等 待 太 长 的 时 间 ， 
例如 打开 网 页 ， 以 及 在 网 页 中 单 击 链接 后 ， 跳 转 到 下 一 个 网 页 所 需 的 时 间 。 

2 秒 定律 中 的 2 秒 并 非 强调 只 允许 等 待 2 秒 ， 而 是 作为 一 种 理想 化 的 状态 ， 以 对 网 
页 界面 设计 师 进 行 的 要 求 。 具 体 到 界面 设计 工作 中 ， 就 是 在 将 网 页 的 界面 设计 图 转换 为 
网 页 图 形 时 ， 应 尽量 对 图 形 图 像 进行 优化 ， 将 其 转换 为 体积 较 小 的 GIF 或 JPG 等 格式 的 
图 像 ， 而 非 体积 较 大 的 BMP 或 PNG 格式 图 像 。 在 可 以 使 用 单 色 背景 或 渐变 背景 时 ， 尽 
量 少 使 用 图 像 背 景 ， 尽 量 以 较 少数 量 的 图 片 插入 网 页 中 ， 以 降低 浏览 器 对 服务 器 的 请 求 
次 数 ， 提 高 页 面 访 问 的 速度 。 

除 此 之 外 ， 还 可 以 通过 一 些小 的 技巧 ， 提 高 用 户 对 网 页 的 认同 。 例 如 ， 对 每 个 按钮 
和 链接 添加 交互 事件 ， 设 计 鼠 标 滑 过 或 单 击 时 的 效果 ， 让 用 户 感觉 到 进行 任何 操作 时 ， 
网 页 系统 都 可 以 很 快 地 反应 ， 防 止 用 户 产 生 “ 这 个 按钮 点 上 去 没有 反应 ”或 “这 个 链接 
点 上 去 没有 反应 ”的 抱怨 。 

同时 ， 还 应 经 常 验证 链接 的 有 效 性 ， 防 止 坏 链接 、 死 链接 的 出 现 ， 尽 量 少 使 用 空 链 
接 ， 而 应 专门 建立 一 个 类 似 “ 尚 在 添加 内 容 ， 敬 请 期 待 ”的 页 面 ， 将 尚未 添加 页 面 的 链 
接 转 到 此 页 面 中 ， 告 诉 用 户 ， 这 里 很 快 就 有 新 的 内 容 出 现 。 


总 而 言 之 ，2 秒 定律 的 核心 就 是 在 保证 可 用 性 的 基础 上 ， 用 户 等 待 的 时 间 越 少 ， 则 
用 户 体验 就 越 好 。 

(3) 3 次 单 击 定律 

3 次 单 击 定律 是 普遍 适用 于 网 页 界面 设计 的 定律 ， 该 定律 认为 ,用 户 在 访问 网 页 时 ， 
如 果 在 3 次 单 击 后 仍然 无 法 找到 相关 的 信息 或 得 到 网 页 的 服务 ,就 会 停止 使 用 这 个 网 站 。 

3 次 单 击 定律 并 非 单纯 地 强调 用 户 单 击 页 面 的 次 数 ， 而 是 要 求 界面 设计 师 在 界面 设 
计 中 明确 网 站 导航 、 罗 辑 架 构 和 站 点 的 层次 结构 ， 让 用 户 了 解 他 们 现在 在 做 什么 ， 已 经 
做 过 什么 ， 将 要 做 什么 ， 以 及 做 这 些 事情 对 他 们 有 什么 用 处 。 如 果 确 实 能 够 让 用 户 感觉 
到 继续 操作 下 去 可 以 得 到 更 多 有 用 的 东西 ， 那 么 单 击 5 次 、10 次 甚至 30 次 ， 用 户 都 会 
毫 不 犹豫 地 进行 下 去 。 

3 次 单 击 定律 主要 应 用 于 网 页 的 内 容 结 构 设 计 中 ， 要 求 界面 设计 师 在 任何 情况 下 都 
不 应 人 为 地 为 用 户 访 问 网 页 内 容 制 造 障碍 , 而 应 为 用 户 访问 这 些 内 容 提供 最 简便 的 接口 。 
同时 ， 在 用 户 进行 操作 之 前 ， 应 尽量 告诉 用 户 这 一 步 操作 对 他 们 来 说 有 多 重要 。 


4. 界面 一 臻 


在 设计 一 个 网 页 界面 时 ， 应 保持 界面 中 各 种 元 素 都 有 统一 的 风格 ， 通 过 精心 设计 的 
各 种 界面 元 素 提高 用 户 访问 的 效率 ， 防 止 用 户 因 适 应 不 同 风格 的 界面 而 浪费 精力 。 

设计 网 页 界面 不 能 过 于 标新立异 ， 不 应 在 同一 个 网 站 的 各 种 页 面 中 使 用 他 然 不 同 的 
界面 元 素 。 例 如 ， 在 某 一 个 页 面 中 使 用 圆 角 算 形 的 3D 风格 提交 按钮 ， 而 在 另 一 个 页 面 
中 则 使 用 矩形 单 色 风 格 的 提交 按钮 ,这 种 界面 上 的 差异 首先 会 给 用 户 一 个 页 面 设计 粗糙 ， 
不 专业 的 感觉 。 其 次 ， 也 会 使 用 户 感到 困惑 ， 使 一 些 对 计算 机 不 太 熟 悉 的 用 户 感到 无 所 
适 从 。 

设计 网 页 界面 需要 充分 利用 用 户 对 已 经 浏览 的 页 面 的 熟悉 程度 ， 用 统一 风格 的 界面 
引导 用 户 ， 使 用 户 完成 各 项 应 用 ， 为 用 户 营 造 出 一 种 对 网 页 精心 制作 ， 十 分 专业 的 感觉 。 


网 页 的 用 户 界 面 是 由 各 种 界面 元 素 组 成 的 ， 每 一 种 界面 元 素 都 将 承担 网 页 的 部 分 功 
能 。 典 型 的 网 页 用 户 界 面 通常 包括 页 头 (Header)、 导 航 栏 (Navigator)、 各 种 条 幅 (Banner)、 
侧 栏 (Aside) 、 文 章 区 域 (Article) 以 及 页 脚 (Footer) 等 。 


1. 页 头 (Header) 


页 头 顾名思义 ， 其 通常 位 于 整个 网 页 界面 最 顶端 ， 用 于 展示 网 页 界面 中 最 基本 的 描 
述 信息 。 典 型 的 页 头 包含 网 站 的 Logo、 名 称 、 页 面 的 名 称 以 及 一 些 功能 性 的 元 素 ， 如 站 
内 搜索 框 、 登 录 信 息 等 。 例 如 ， 清 华 大 学 官方 网 站 的 页 头 就 显示 了 清华 大 学 的 校徽 、 名 
称 以 及 切换 语言 的 按钮 和 搜索 框 等 ， 如 图 1-2 所 示 。 

当然 ， 页 头 的 位 置 也 并 非 一 成 不 变 ， 一 些 特殊 的 网 站 设计 方案 有 可 能 也 会 将 页 头 放 
置 在 导航 栏 的 下 方 ， 或 和 导航 栏 合并 在 一 起 ， 形 成 一 个 整体 。 例 如 ，LiveSino 博客 网 站 
就 采用 了 页 头 与 导航 合并 的 设计 ， 如 图 1-3 所 示 。 
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图 1-3 _LiveSino 网 站 的 页 头 


2. 导航 栏 (Navigator) 


导航 栏 是 网 站 整体 功能 与 终端 用 户 的 桥 粱 ， 其 作用 类 似 文档 中 的 目录 和 索引 ， 可 为 
终端 用 户 提供 一 些 简单 便捷 的 入 口 ， 帮 助 终端 用 户 快速 访问 网 站 对 应 的 功能 页 面 。 在 传 
统 的 网 页 界面 中 ， 导 航 栏 通常 会 被 放置 到 页 头 的 下 方 ， 如 图 1-4 所 示 。 
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jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML Documentation 
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simpler with an easy-to-use APIthat works across a multitude of browsers. With a 


1-4 位 于 页 头 下 方 的 导航 栏 


iQuery Learning Center 


通常 情况 下 ， 导 航 栏 的 设计 以 横 列 为 主 ， 其 包含 的 导航 按钮 应 以 3 一 7 个 为 宜 。 如 
果 切 实 需要 放置 更 多 的 导航 内 容 ， 则 可 以 将 其 分 类 整理 ， 以 下 拉 菜单 的 方式 来 实现 ， 如 
图 1-5 所 示 。 
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条 幅 (Banner) 


条 幅 主 要 用 于 存放 广告 、 产 品 介绍 、 企 业 形象 推广 等 相关 的 大 幅 图 像 内 容 。 早 期 
条 幅 通 常用 于 搜索 引擎 的 广告 推广 且 受 限于 计算 机 硬件 设备 (大 多 数 计算 机 屏幕 都 采 
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800pxX 600px 作为 标准 分 辩 率 ) ， 其 尺寸 、 文 件 大 小 、 文 件 规范 以 及 在 页 面 中 的 位 置 等 
都 具有 严格 的 规定 ， 属 于 广告 行业 内 通行 的 标准 ， 如 表 1-2 所 示 。 
表 1-2 告 行业 条 幅 广告 的 标准 


页 面 位 置 
页 面 顶部 


中 尺寸 横幅 468px X 60px gif:14K/swf:16K 


按钮 170px X 60px/120pxx60px gif:6K/swf:8K 一 
通栏 770pxX100px gif:20K/swf:25K 2 
小 幅 动 画 200px X 150px swf:25K 


画 中 画 360pxX300px gif:20K/swf:25K 


浮动 框 80px X 80px gif/swf<8K 
全 屏 收 缩 广告 750px X 550px gif:20K 
柱 130px X 200px gif:15K/swf:17K 


随 着 计算 机 技术 的 发 展 , 现代 计算 机 屏幕 日 趋 多 样 化 (大量 宽屏 显示 设备 的 普及 )， 
同时 界面 设计 理论 的 发 展 和 设计 理念 的 不 断 革 新 ， 现 代 的 网 页 界面 设计 对 条 幅 的 规范 更 
加 灵活 ， 人 允许 设计 者 通过 实际 的 设计 效果 需求 来 决定 条 幅 的 尺寸 和 位 置 。 

同时 ， 由 于 宽带 技术 的 普及 和 网 络 传输 速度 的 提升 ， 现 代 的 网 页 条 幅 也 很 少 再 受 限 
于 过 去 苛刻 的 文件 大 小 限制 ， 逐 步 趋向 于 高 分 辨 率 、 高 清晰 度 和 复杂 化 。 


页 面 右 侧 
覆盖 整 页 


例如 ， 现 代 的 企业 网 站 通常 会 将 若干 同样 尺寸 的 条 幅 以 脚本 的 方式 制作 成 轮 播 动 
画 ， 通 过 高 清晰 的 图 像 来 改善 整个 网 页 界面 的 外 观 ， 如 图 1-6 所 示 。 
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4. 侧 栏 (Aside) 


早期 的 Web 站 点 受 限于 显示 设备 的 分 辨 率 ， 多 以 800px X 600px ani 显示 器 
为 目标 来 设计 ， 由 于 显示 器 的 像素 宽度 有 限 ， 这 类 通常 以 流 式 布局 来 设计 ， 整 个 页 面 的 
元 素 以 从 上 到 下 的 顺序 依次 排列 。 


随 着 较 高 分 辩 率 〈1024pxX768px 甚至 更 高 ) 的 普 屏 显示 器 和 宽屏 显示 设备 的 逐渐 
普及 , 现代 的 Web 站 点 呈献 了 多 列 化 的 设计 ， 即 在 主 内容 栏 侧面 会 增加 若干 侧 栏 ， 以 侧 
栏 来 辅助 导航 , 或 显示 页 面 内 的 相关 信息 , 通过 这 些 辅助 的 侧 栏 来 使 网 页 界面 更 加 丰满 。 

在 不 同类 型 的 网 站 中 ， 侧 栏 的 作用 是 有 所 区 别 的 。 例 如 ， 在 新 闻 类 网 站 中 ， 侧 栏 通常 
会 显示 专题 文章 ， 或 最 具备 热度 的 新 闻 条 目 ， 或 者 新 闻 的 热度 评论 信息 等 ， 如 图 1-7 所 示 。 
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新 闻 网 站 的 专题 栏 


在 电子 商务 类 网 站 中 ， 侧 栏 则 往往 注重 于 对 商品 的 筛选 ， 辅 助 导航 实现 产品 的 精确 


分 类 ， 如 图 1-8 所 示 。 
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图 1-8 ,电子 商务 网 站 的 导航 栏 
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5. 文章 区 域 (Article) 


文章 区 域 是 页 面 中 主要 呈献 网 站 内 容 的 界面 元 素 ， 在 不 同类 型 的 网 页 中 ， 文 章 区 域 
承载 这 迎 然 的 功能 。 在 网 站 的 首页 , 文章 区 域 通常 会 概述 网 站 的 主要 功能 ， 如 新 闻 列 表 、 
产品 列表 、 重 点 突出 的 企业 信息 、 各 种 功能 和 链接 等 ， 如 图 1-9 所 示 。 


蓝 港 发 行 ， 蓝 洪 研发 业界 新 闻 wre 田 
全 民 寺 宝 玫 次 [区 守之 剑 3D] 夏 日 新 版 今日 开启 


* 扒 击 d 作 降 而 《 戎 棕 冲 市 冲 今 日 不 册 档 Hi 计 

。 《王者 之 全》 战神 版 热血 公 

*《 王 青 之 剑 9 “福利 版 "今日 亿 情 公 列 ! 

* 4 月 习 日 定 为 “首都 网 络 安全 日 ” 

“ 愉 神 之 刃 少 今日 不 出 档 到 式 引 卡 牌 手 劳 35Eb 作 革 市 4 


pi $ 手机 游戏 MMORPG 游 戏 回合 制 游戏 网 页 游戏 
注册 账号 游戏 充值 sa © AZO 全 天 刘 层 龙 刀 村 明光 国 
| 4 #2n@ 本 5 相关 = 
E20 © 全 FE 天 下 Sa 
Ee 本 无 取 


国 坎 站 游戏 国 最 新 源 戏 


和 图 1-9_, 企 业 首页 的 文章 区 域 


在 新 闻 网 页 中 ， 文 章 区 域 主要 用 于 呈献 新 闻 的 内 容 ， 包 括 新 闻 中 的 文本 、 图 像 、 视 
频 等 ， 如 图 1-10 所 示 。 
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新 华 网 北京 7 月 21 日 电 做 大 今日 发 布 2014 年 上 半年 度 经 营业 缚 今年 上 半年 ， 读 公司 详 现 销售 收入 
1358 亿 元 人 民 币 ， 同 比 增长 19%; 营业 利润 率 18. 3%。 


“2014 年 上 半年 公司 恢 入 和 恒利 能 力 基本 袜 现 了 预期 : 受苦 于 全 球 LTE 网 络 投资 增长 ,华为 进一步 确 
定 了 在 MB8 领 域 的 领导 者 地 位 ， 同 1 软件 和 服务 的 快速 着 长 促使 运营 商 网 结业 务 保持 持续 稳定 省 长 ; 企业 
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2014 年 实现 持续 有 效 增长 ,经 营 稳健 , 财务 健康 。” 
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， 中 移动 名 用 户 达 1394. 3 万 5 十 万 目标 能 否 实现 
创造 更 大 的 价值 ， 构 建 更 加 美好 的 全 联接 世界 ， 激 发 无 限 机 歇 与 可 能 。 ,新 人 te 评 4 大战 一 触 即 发 本 十 品牌 页 良机 
， 易 信 进 入 亿 级 俱乐部 “拼车 ”领衔 特色 应 月 


面向 未 来 ， 华 为 将 坚持 开放 合作 、 持 续 艰苦 奋斗, 致力 成 为 IC1 基 础 设施 领域 的 行业 领导 者 , 为 客户 
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在 产品 网 页 中 , 文章 区 域 主要 用 于 呈献 产品 的 各 种 信息 介绍 ,以 及 产品 的 图 像 展示 、 
简介 和 参数 等 ， 如 图 1-11 所 示 。 
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6. 页 脚 (Footer) 


页 脚 与 页 头 相对 应 ， 也 是 绝 大 多 数 网 页 的 重要 组 成 部 分 ， 其 会 包含 简介 类 导航 、 版 
权 声 明 等 相关 信息 。 页 脚 元 素 通常 会 位 于 页 面 的 底部 ， 如 图 1-12 所 示 。 
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9 -中 SE= 网 页 界面 设计 风格 

最 初 的 互联 网 主要 用 于 学 术 交 流 ， 分 享 技术 文档 、 论 文 和 专著 等 ， 其 采用 的 结构 语 
言 HTML 本 身 也 是 由 学 术 论 文 所 用 的 SGML 结构 语言 发 展 而 来 。 这 段 时 期 的 网 页 通常 
以 纯粹 的 文字 和 超 链 接 构 成 。 例 如 ， 世 界 上 第 一 个 万 维 网 网 页 ， 其 本 身 就 包含 了 若干 文 
本 和 超 链 接 ， 如 图 1-13 所 示 。 
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s to a large universe of do 


1-13 ,世界 上 第 一 个 万 维 网 网 页 
早期 的 HTML 网 页 由 于 所 承载 的 媒体 限制 , 对 多 媒体 内 容 支 持 是 有 限 的 ， 因 此 早期 
的 Web 设计 主要 工作 就 是 对 这 些 文本 内 容 进行 排版 。 
随 着 HTML 语言 版 本 的 不 断 发 展 , 在 1993 年 初 制订 的 正式 的 HTML1.0 国际 标准 草 
案 时 ， 开 始 支持 插入 式 的 图 像 ， 此 时 ，HTML 技术 才 正 式 地 成 为 一 种 多 媒体 的 载体 。 之 
后 ， 逐 渐 有 网 站 开始 采用 图 像 技术 来 增强 网 页 的 表现 能 力 ， 如 图 1-14 所 示 。 


Welcome to Microsoft s World Wide Web Server! 


Where do you want to go today? 


I¢ your brovwser doesn’ t support inages, ve have a Lexl menu as voll. 


WY. MICROSOFT, COM is running Wicrosoft' s Windzss NI Server 3.5 and EMWAC = HTIPS 


1-14 ,早期 微软 的 官方 网 站 


这 些 应 用 了 多 媒体 技术 的 网 站 真正 体现 了 网 站 的 设计 优先 原则 ， 也 使 得 网 页 制作 真 
正成 为 了 艺术 设计 的 一 个 门类 ， 由 此 引发 了 网 页 设计 的 三 种 主要 风格 的 产生 ， 即 拼接 式 
风格 、“ 拟 物化 ”风格 和 “扁平 化 ”风格 。 


1. 拼接 式 网 页 设计 


随 着 多 媒体 技术 的 发 展 ，Web 浏览 器 的 功能 日 趋 完善 ， 网 页 可 以 包含 的 内 容 也 逐渐 
丰富 ， 早 期 的 逐渐 借助 表格 、 背 景色 、 插 图 等 功能 实现 了 更 加 丰富 的 界面 效果 ， 如 采用 
HTML 代码 拼接 出 整个 界面 ， 或 以 大 量 背 景 图 像 来 拼接 内 容 。 

此 时 的 网 页 通常 谈 不 上 什么 美观 ， 但 比 纯粹 的 文本 内 容 已 经 有 较 大 的 改观 ， 例 如 ， 
本 世纪 初期 的 微软 公司 官方 网 站 , 就 采用 了 大 量 背景 图 像 和 背景 色 拼 接 而 成 的 整体 效果 ， 
如 图 1-15 所 示 。 


Your Outlcok Inbox 
Just Got Smaller 


Windows Mobile 
Al Products 


1-15 本 世纪 初期 的 微软 公司 网 站 


这 种 拼接 效果 的 网 站 在 20 世纪 末 至 本 世纪 初 的 时 代 曾 经 非常 流行 ， 其 设计 风格 影 
响 了 互联 网 诞生 初期 至 本 世纪 初 的 十 余年 时 间 几 乎 所 有 网 站 和 网 页 的 设计 。 

在 这 十 余年 时 间 里 ， 无 数 的 网 站 都 采用 此 类 拼接 设计 方案 ， 绝 大 多 数 的 网 站 设计 师 
都 使 用 Fireworks、Photoshop 等 图 像 设 计 软 件 来 制作 整体 的 网 站 设计 方案 ， 并 采用 切片 
技术 来 将 网 站 的 设计 方案 转换 为 由 HIML 表格 和 简单 的 CSS 样式 表 、 碎 片 化 的 背景 图 
等 元 素 组 成 的 页 面 。 一 时 间 ， 具 备 “ 切 图 ”能 力 成 为 网 站 设计 师 是 否 称职 的 标准 。 

这 种 设计 风格 的 问题 在 于 ， 其 过 于 注重 繁 碎 的 表格 拼接 来 呈献 页 面 的 效果 ， 复 杂 的 
表格 HIML 代码 直接 影响 了 网 站 的 维护 性 ， 从 而 限制 了 网 站 界面 更 新 的 效率 。 基 于 此 种 
理由 , 在 越 来 越 多 的 网 站 开发 者 开始 借助 Fireworks 和 Photoshop 等 工具 手工 裁 切 设计 方 
案 ， 或 整体 切片 后 以 图 像 结合 XHTML、CSS 等 技术 来 重 构 网 站 。 

用 XHTML 和 CSS 等 网 站 技术 开发 方案 重 构 网 站 在 一 定 程度 上 也 影响 了 网 站 界面 设 
计 的 风格 ， 很 多 网 站 开始 尝试 采用 更 加 灵活 的 方法 来 设计 网 站 的 界面 。 


2.“ 拟 物化 ”网 页 设计 
随 着 苹果 公司 的 划时代 产品 iPhone 发 布 , 一 种 全 新 的 设计 理念 被 提出 , 即 “ 拟 物化 ” 
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的 设计 理念 。 


“ 拟 物化 ”的 设计 理念 ， 指 在 界面 设计 中 模拟 各 种 实际 物理 材质 的 表面 纹理 、 图 案 、 


如 图 1-16 所 示 。 


光影 和 投影 等 ， 使 网 站 界面 更 加 富 于 实体 化 。 典 型 的 “ 拟 物化 ”设计 网 站 如 苹果 公司 的 
苹果 商店 , 其 采用 了 具有 三 维 立 体感 的 导航 , 所 有 产品 图 标 都 以 真实 的 产品 图 形 来 表现 ， 


Apple Store wanapyuuaaa 次 Account | 本 ca 
EL 柄 号 ， 四 邮 
Shop Mac Shop ipad Shopiphone Shop iPod Shop Apple TV Shop Accessories 
> All-new fun from Parrot. 
Now available for pre-order. 
Shop now» 


iPadAir 2 
The power of lightness. 6 

人 

司 


4 


Free shipping. Free retums_ Buy online, pick up in store. 


Get tree eMpping direct to your dnor on al ordere over $50. 


和 图 1-16 ,“ 拟 物化 ”的 苹果 商城 


“ 拟 物化 ”的 设计 方案 一 推出 ， 即 受到 了 网 页 界面 设计 者 们 的 推崇 ， 一 时 间 ， 


“所 


物化 ”的 网 站 设计 方案 如 雨后春笋 般 诞生 , 越 来 越 多 的 网 站 界面 开始 以 这 种 方式 来 设计 。 
“ 拟 物 化 ”设计 方案 相 比 传统 的 拼接 网 页 ， 其 更 适合 采用 模块 化 的 XHTML 和 CSS 
技术 来 解决 网 页 界面 元 素 的 显示 和 定义 问题 ， 因 此 相 比 传统 的 设计 方案 其 维护 性 更 好 ， 


题 。 


放 器 系统 ， 采 


也 更 加 美观 。 


3.“ 扁 平 化 ”网 页 设计 


“ 拟 物 化 ”设计 方案 虽然 解决 了 网 页 界面 模块 化 的 问题 ， 但 是 其 本 身 仍 存在 一 些 问 
这 主要 是 因为 “ 拟 物 化 ”的 网 页 界面 设计 方案 需要 大 量 的 高 清晰 度 图 像 来 作为 网 页 
界面 元 素 的 背景 和 图 标 ， 需 要 耗费 相当 多 的 系统 资源 。 
在 传统 PC 上 ,“ 拟 物化 ”的 网 页 界面 元 素 所 消耗 的 资源 尚 可 由 强大 的 PC 硬件 设备 
提供 ， 但 是 在 手持 设备 上 ， 使 用 “ 拟 物化 ”的 网 页 界面 元 素 ， 很 可 能 会 导致 手持 设备 的 
能 量 和 流量 消耗 过 高 。 同 时 ，“ 拟 物化 ”设计 的 网 页 由 于 其 背景 图 像 尺 寸 的 限制 ， 也 很 
难 满足 多 种 类 型 屏幕 的 尺寸 变化 需求 。 
基于 此 种 理由 ， 微 软 公司 首先 在 2006 年 推出 了 基于 “扁平 化 ”设计 的 Zune 手持 播 


用 “扁平 化 ”的 设计 来 实现 系统 的 用 户 界面 。 在 三 年 后 ， 微 软 还 推出 了 完 


全 依托 扁平 化 设计 的 Windows Phone 手机 系统 ， 最 终 推出 了 基于 “扁平 化 ”设计 的 
Modem UI 设计 语言 ， 并 将 其 应 用 到 了 Windows 8 操作 系统 中 。 

所 谓 “扁平 化 ”设计 ， 就 是 据 弃 一 切 装饰 效果 ， 诸 如 阴影 ， 透 视 ， 纹 理 ， 渐 变 等 ， 
将 “ 拟 物化 ”设计 中 的 各 种 修饰 元 素 全 部 清除 ， 仅 保留 干净 利落 的 界面 核心 内 容 ， 通 过 
多 彩 的 “ 瓷 贴 ”来 表现 设计 的 效果 。 

微软 公司 在 过 去 的 数 年 中 ， 已 经 全 面 将 “扁平 化 ”设计 这 一 理念 应 用 到 了 其 所 有 产 
品 线 的 界面 设计 中 ， 包 括 移动 操作 系统 、 手 机 操作 系统 、 办 公 软 件 以 及 所 有 其 下 属 网 站 
等 。 如 今 , “扁平 化 ”设计 的 理念 已 经 逐渐 为 广大 设计 师 接受 ， 甚 至 最 初 提出 “ 拟 物化 
设计 的 苹果 公司 也 开始 着 手 对 下 属 产品 的 “扁平 化 ”设计 。 和 典型 地 应 用 了 “扁平 化 ” 设 
计 的 网 站 如 微软 公司 的 MSDN 开发 者 站 点 等 ， 如 图 1-17 所 示 。 


抓 住 机 遇 : 

EE 
EE ET 
ET ET 


开发 人 员 资源 : 


1-17_MSDN 官方 网 站 


“扁平 化 ”设计 的 网 页 界面 可 以 与 最 新 的 HTML 5 和 CSS 3 等 先进 的 Web 开发 技术 
结合 ， 开 发 出 消耗 系统 资源 更 少 ， 更 加 精简 而 节省 流量 的 网 站 系统 ， 未 来 “扁平 化 ” 设 
计 即 将 成 为 网 页 设计 的 主流 风格 。 


网 页 设计 是 一 种 特殊 的 视觉 设计 ， 它 对 色彩 的 依赖 性 很 高 ， 色 彩 在 网 页 上 是 “看 得 
”的 视觉 元 素 ， 它 是 人 们 视觉 最 敏感 的 东西 ， 也 是 网 站 风格 设计 的 决定 性 因素 之 一 。 


@--141 色彩 的 基础 概念 -、 


7 


加 


色彩 是 网 站 最 重要 的 一 个 部 分 ， 在 学 习 如 何 为 网 站 进行 色彩 搭配 之 前 ， 首 先 要 来 认 
识 颜 色 。 
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1. 色彩 与 视觉 原理 


色彩 的 变化 是 变幻 黄 测 的 ， 这 是 因为 物体 本 身 除 了 其 自身 的 颜色 外 ， 有 时 也 会 因为 
周围 的 颜色 ， 以 及 光源 的 颜色 而 所 有 改变 。 

(1) 光 与 色 

光 在 物理 学 上 是 电磁 波 的 一 部 分 ， 其 波长 为 700 一 400nm， 在 此 范围 称 为 可 视 光 线 。 
当 把 光线 引入 三 棱镜 时 ， 光 线 被 分 离 为 红 、 橙 、 黄 、 绿 、 青 、 蓝 、 紫 ， 因 而 得 出 的 自然 


光 是 七 色光 的 混合 。 这 种 现象 称 作 光 的 分 解 或 光谱 ， 七 色光 谱 的 颜色 分 布 是 按 光 的 波长 
排列 的 ， 如 图 1-18 所 示 ， 可 以 看 出 红色 的 波长 最 长 ， 紫 色 的 波长 最 短 。 

光 是 以 波动 的 形式 进行 直线 传播 的 ， 具 有 波长 和 振幅 两 个 因素 。 不 同 的 波长 长 短 产 
生 色相 差别 。 不 同 的 振幅 强 弱 大 小 产生 同一 色相 的 明暗 差别 。 光 在 传播 时 有 直射 、 反 射 、 
透射 、 漫 射 、 折 射 等 多 种 形式 。 

光 直 射 时 直接 传 入 人 眼 ， 视 觉 感受 到 的 是 光源 色 。 当 光源 照射 物体 时 ， 光 从 物体 表 
面 反 射出 来 ， 人 眼 感受 到 的 是 物体 表面 色彩 。 当 光照 射 时 ， 如 遇 玻 璃 之 类 的 透明 物体 ， 
人 眼看 到 的 是 透 过 物体 的 穿 透 色 ， 光 在 传 


播 过 程 中 ， 受 到 物体 的 干涉 时 ， 则 产生 漫 
射 ， 对 物体 的 表面 色 有 一 定 影响 。 如 通过 
不 同 物体 时 产生 方向 变化 ， 称 为 折射 ， 反 
映 至 人 眼 的 色光 与 物体 色相 同 。 

(2) 物体 色 

自然 界 的 物体 五 花 八 门 、 变 化 万 千 ， 


它们 本 身 虽然 大 都 不 会 发 光 ， 但 都 具有 选 oo soom ooom room 
择 性 地 吸收 、 反 射 、 透 射 色光 的 特性 。 当 [了 图 1_18 可 见 光 与 光 江 
然 ， 任 何 物体 对 色光 不 可 能 全 部 吸收 或 反 


射 ， 因 此 ， 实 际 上 不 存在 绝对 的 黑色 或 白 
色 。 

物体 对 色光 的 吸收 、 反 射 或 透射 能 力 ， 
很 受 物体 表面 肌理 状态 的 影响 。 但 是 ， 物 
体 对 色光 的 吸收 与 反射 能 力 虽 是 固定 不 变 


ee 让 

- 和 认 儿 
的 ， 而 物体 的 表面 色 却 会 随 着 光源 色 的 不 | [MIN 
同 而 改变 ， 有 时 甚至 失去 其 原 有 的 色相 感 LA 上 
觉 。 所 谓 的 物体 “固有 色 ”， 实 际 上 不 过 | 
是 常 光 下 人 们 对 此 的 习惯 而 已 。 例 如 在 办 
烁 、 强 烈 的 各 色 需 虹 灯 光 下 ， 所 有 建筑 几 
乎 失去 了 原 有 本 色 而 显得 奇异 英 测 ， 如 图 《了 图 1-19 。 夜 晚 的 城市 
1-19 所 示 。 


2. 色彩 的 三 要 素 


自然 界 的 色彩 虽然 各 不 相同 ， 但 任何 有 彩色 
个 基本 属性 ， 也 称 为 色彩 的 三 要 素 。 


[ey 


色彩 都 具有 色相 、 亮 度 、 饱 和 度 这 三 


(1) 色相 

色相 指 色 彩 的 相貌 ， 是 区 别 色彩 种 类 的 名 称 。 是 根据 该 色光 波长 划分 的 ， 只 要 色彩 
的 波长 相同 ， 色 相 就 相同 ， 只 有 波长 不 同 才 产 生 色相 的 差别 。 红 、 橙 、 黄 、 绿 、 蓝 、 紫 
等 都 代表 一 类 具体 的 色相 ， 它 们 之 间 的 差别 就 属于 色相 差别 。 当 用 户 称呼 其 中 某 一 色 的 
名 称 时 ， 就 会 有 一 个 特定 的 色彩 印象 ， 这 就 是 色相 的 概念 。 正 是 由 于 色彩 具有 这 种 具体 
相貌 特征 ， 用 户 才 能 感受 到 一 个 五 彩 缤纷 的 世界 。 如 果 说 亮度 是 色彩 隐秘 的 骨 骨 ,色相 


就 很 像 色 彩 外 表 华 美的 肌肤 。 色 相 体现 着 色彩 外 向 的 性 格 ， 是 色彩 的 灵魂 ， 如 图 1-20 
所 示 。 
a 
es — 
和 图 1-20 色相 


如 果 把 光谱 的 红 、 橙 黄 、 绿 、 蓝 、 紫 诸 色 带 首尾 相连 ， 制 作 一 个 圆 环 ， 在 红 和 紫 之 
间 插 入 半幅 ， 构 成 环形 的 色相 关系 ， 便 称 
为 色相 环 。 在 六 种 基本 色相 各 色 中 间 加 插 
-个 中 间 色 ， 其 首尾 色相 按 光 谱 顺 序 为 : 
红 、 禁 红 、 检 、 黄 、 黄 绿 、 绿 、 青 绿 、 蓝 
绿 、 蓝 、 蓝 紫 、 紫 、 红 紫 ， 构 成 十 二 基本 
色相 ， 这 十 二 色相 的 彩 调 变化 ， 在 光谱 色 
感 上 是 均匀 的 。 如 果 再 进一步 找 出 其 中 间 
色 ， 便 可 以 得 到 二 十 四 个 色相 ， 如 图 1-21 
所 示 。 和 图 1-21 色相 环 

(2) 饱和 度 

饱和 度 是 指 色 彩 的 纯净 程度 。 可见光 辐射 ， 有 波长 相当 单一 的 ， 有 波长 相当 混杂 的 ， 
也 有 处 在 两 者 之 间 的 ， 黑 、 白 、 灰 等 无 彩色 就 是 波长 最 为 混杂 ， 纯 度 、 色 相 感 消失 造成 
的 。 光 谱 中 红 、 橙 、 黄 、 绿 、 蓝 、 紫 等 色光 都 是 最 纯 的 高 纯度 的 色光 。 

饱和 度 取决 于 该 色 中 含 色 成 分 和 消 色 成 分 ( 黑 、 白 、 灰 ) 的 比例 ， 含 色 成 分 越 大， 
饱和 度 越 大 ， 消 色 成 分 越 大 ， 饱 和 度 越 小 ， 也 就 是 说 ， 向 任何 一 种 色彩 中 加 入 黑 、 白 、 
灰 都 会 降低 它 的 饱和 度 ， 加 的 越 多 就 降 的 越 低 。 

例如 ， 当 在 蓝 色 中 混入 了 白色 时 , 虽然 仍 具 有 蓝 色 相 的 特征 , 但 它 的 鲜艳 度 降 低 了 ， 
亮度 提高 了 ， 成 为 淡 蓝 色 ;， 当 混入 黑色 时 ， 鲜 艳 度 降低 了 ， 亮 度 变 暗 了 ， 成 为 瞳 蓝 色 ; 
当 混 入 与 蓝 色 亮度 相似 的 中 性 灰 时 ， 它 的 亮度 没有 改变 ， 饱 和 度 降 低 了 ， 成 为 灰 蓝 色 。 
采用 这 种 方法 有 十 分 明显 的 效果 ， 就 是 从 纯色 加 灰 渐 变 为 无 饱和 度 灰 色 的 色彩 饱和 度 序 
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列 ， 如 图 1-22 所 示 。 


提 示 

纯色 是 饱和 度 最 高 的 一 级 。 光 谱 中 红 、 栓 、 黄 、 
绿 、 蓝 、 紫 等 色光 是 最 纯 的 高 饱和 度 的 光 ; 色 料 
中 红色 的 饱和 度 最 高 ， 橙 、 黄 、 紫 等 他 和 度 较 高 ， 
蓝 、 绿 色 饱 和 度 最 低 。 


黑白 网 页 与 彩色 网 页 之 间 存 在 着 非常 
大 的 差异 。 大 多 数 情 况 下 黑白 网 页 给 浏览 
者 的 视觉 冲击 力 不 如 彩色 网 页 效果 强烈 ， 
同时 对 作品 网 页 的 风格 也 有 一 些 局 限 性 。 
而 色彩 的 选择 不 仅仅 决定 了 作品 的 风格 ， 
同时 也 使 得 作品 更 加 饱满 、 富 有 魅力 ， 如 
图 1-23 所 示 。 


1-22 不同 的 饱和 度 
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了 图 1-23 ,彩色 与 灰色 网 页 


(3) 亮度 

亮度 是 色彩 赖 于 形成 空间 感 与 色彩 体 量 感 的 主要 依据 ， 起 着 “骨架 ”的 作用 。 在 无 
彩色 中 ， 亮 度 最 高 的 色 为 白色 ， 亮 度 最 低 
的 色 为 黑色 ， 中 间 存 在 一 个 从 亮 到 暗 的 灰 
色 系 列 ， 如 图 1-24 所 示 。 

亮度 在 三 要 素 中 具有 较 强 的 独立 性 ， 
它 可 以 不 带 任 何 色 相 的 特征 而 通过 黑白 灰 
的 关系 单独 呈现 出 来 。 

色相 与 饱和 度 则 必须 依赖 一 定 的 明暗 
才能 显现 ， 色 彩 一 旦 发 生 ， 明 瞳 关 系 就 会 
同时 出 现 , 在 用 户 进行 一 幅 素描 的 过 程 中 ， 
需要 把 对 象 的 有 彩色 关系 抽象 为 明暗 色 图 1_-24 不同 亮 度 
调 ， 这 就 需要 有 对 明暗 的 敏锐 判断 力 。 用 
户 可 以 把 这 种 抽象 出 来 的 亮度 关系 看 作 色 彩 的 骨骼 ， 它 是 色彩 结构 的 关键 ， 如 图 1-25 
所 示 。 


色彩 的 混合 


客观 世界 中 的 事物 绚丽 多 彩 ， 调 色 板 上 
色彩 变化 无 限 ， 但 如 果 将 其 归纳 分 类 ， 基 本 
上 就 是 两 大 类 : 一 类 是 原色 ， 即 红 、 黄 、 世 ; 
另 一 类 就 是 混合 色 。 而 使 用 间 色 再 调配 混合 的 
颜色 ， 称 为 复 色 。 从 理论 上 讲 ， 所 有 的 间 色 、 
复 色 都 是 由 三 原色 调和 而 成 。 
在 网 页 的 色彩 布局 时 ， 原 色 是 强烈 的 
混 侣 色 较 温和 ， 复 色 在 明度 上 和 纯度 上 较 
弱 ， 各 类 间 色 与 复 色 的 补充 组 合 ， 形 成 丰富 
多 彩 的 画面 效果 。 
(1) 原色 理论 四 
所 谓 三 原色 ， 就 是 指 这 三 种 色 中 的 任意 “人 图 1-25 亮度 与 饱和 度 之 问 的 关系 
- 色 都 不 能 由 另外 两 种 原色 混合 产生 ， 而 其 他 颜色 可 以 由 这 三 原色 按照 一 定 的 比例 混合 
出 来 ， 色 彩 学 上 将 这 三 个 独立 的 颜色 称 为 三 原色 。 
(2) 混 色 理论 
将 两 种 或 多 种 色彩 互相 混合 ， 造 成 与 原 有 色 不 同 的 新 色彩 称 为 色彩 的 混合 。 它 们 可 
归纳 成 加 色 法 混合 、 减 色 法 混合 、 空 间 混 合 等 三 种 类 型 。 
加 公法 混合 是 指 色光 混合 ， 也 秘 第 一 混合 ， 当 不 同 的 色光 同 时 照射 在 一 起 时 ， 能 产生 
2 -种 新 的 色光 ， 并 随 着 不 同色 混合 量 的 增加 ， 混 色光 的 明度 会 逐渐 提高 将 红 《 橙 ) 、 
、 蓝 ( 紫 ) 三 种 色光 分 别 作 适当 比例 的 混合 ,可 以 得 到 其 他 不 同 的 色光 ， 如 图 1.26 所 示 。 
反之 ， 其 他 色光 无 法 混合 出 这 三 种 色光 来 ， 故 称 为 色光 的 三 原色 ， 它 们 相 加 后 可 得 
出 白光 。 
减 色 法 混合 即 色 料 混合 ， 也 称 第 二 混合 。 在 光源 不 变 的 情况 下 ， 两 种 或 多 种 色 料 混 
合 后 所 产生 的 新 色 料 ， 其 反射 光 相当 于 白光 减 去 各 种 色 料 的 吸收 光 ， 反 射 能 力 会 降低 。 
故 与 加 色 法 混合 相反 ,混合 后 的 色 料 色彩 不 但 色相 发 生变 化 , 而 且 明 度 和 纯度 都 会 降低 。 
所 以 混合 的 颜色 种 类 越 多 , 色彩 就 越 暗 越 混浊 ， 最 后 近似 于 黑 灰 的 状态 , 如 图 1.27 所 示 。 
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和 图 1-26 ,加 色 法 混合 和 图 1-27_, 减 色 法 混合 
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空间 混合 法 亦 称 中 性 混合 、 第 三 混合 。 将 两 种 或 多 种 颜色 穿插 、 并 置 在 一 起 ， 于 一 
定 的 视觉 空间 之 外 ， 能 在 人 眼中 造成 混合 的 效果 ， 故 称 空间 混合 。 其 实 颜色 本 身 并 没有 
真正 混合 ， 它 们 不 是 发 光 体 ， 而 只 是 反射 光 的 混合 。 因 此 ， 与 减 色 法 相 比 ， 只 是 增加 了 
一 定 的 光 刺 激 值 ， 其 明度 等 于 参加 混合 色光 的 明度 平均 值 ， 既 不 减 也 不 加 。 

由 于 它 实 际 比 减 色 法 混合 明度 显然 要 高 ， 因 此 色彩 效果 显得 丰富 、 响 亮 ， 有 一 种 空 
间 的 颤动 感 ， 表 现 自然 、 物 体 的 光 感 ， 更 为 闪耀 。 


简单 地 讲 ， 颜 色 模 式 是 一 种 用 来 确定 显示 和 打印 电子 图 像 色彩 的 模型 ， 即 一 副 电 子 
图 像 用 什么 样 的 方式 在 计算 机 中 显示 或 者 打印 输出 。Photoshop 中 包含 了 多 种 颜色 模式 ， 
每 种 模式 的 图 像 描述 和 重 现 色彩 的 原理 及 所 能 显示 的 颜色 数量 各 不 相同 。 常 见 的 有 如 下 
四 种 模式 。 


1. RGB 颜色 模式 


RGB 色彩 模式 是 工业 界 的 一 种 颜色 标 
准 ， 是 通过 对 红 (Red) 、 绿 (Green) 、 
蓝 (Blue) 三 个 颜色 通道 的 变化 以 及 它们 
相互 之 间 的 全 加 来 得 到 各 式 各 样 的 颜色 
的 ，RGB 即 是 代表 红 、 绿 、 蓝 三 个 通道 的 
颜色 ， 这 个 标准 几乎 包括 了 人 类 视力 所 能 
感知 的 所 有 颜色 ， 是 目前 运用 最 广 的 颜色 
系统 之 一 ， 如 图 1-28 所 示 。 

RGB 色彩 模式 中 ， 每 两 种 颜色 的 等 
量 , 或 者 非 等 量 相 加 所 产生 的 颜色 如 表 1-3 芷 了 图 1-28 RGB 色彩 模式 分 析 图 
所 示 。 
2S 表 1-3_, 每 两 种 不 同 量度 相 加 所 产生 的 颜色 
混合 公式 
RGB 两 原色 等 量 混合 公式 : 
R( 红 ) 十 G ( 绿 ) 生成 Y( 黄 ) (R=G) 
G ( 绿 ) +B ( 蓝 ) 生成 C ( 青 ) (G=B) 
B ( 蓝 ) 十 R( 红 ) 生成 M (洋红 ) (B=R) 


RGB 两 原色 非 等 量 混合 公式 : 
R( 红 ) 十 G( 绿 减弱) 生成 YR( 黄 偏 红 ) 
红 与 绿 合成 黄色 ， 当 绿色 减弱 时 黄 偏 红 
R( 红 | 减弱 ) 十 G ( 绿 ) 生成 YG( 黄 偏 绿 ) 
红 与 绿 合成 黄色 ， 当 红色 减弱 时 黄 偏 绿 


G ( 绿 ) 十 B( 蓝 1 减弱 ) 生成 CG ( 青 偏 绿 ) 
绿 与 蓝 合成 青色 ， 当 蓝 色 减弱 时 青 偏 绿 


混合 公式 


RGB 两 原色 非 等 量 混合 公式 : 


G ( 绿 ! 减 弱 ) +B ( 蓝 ) 生成 CB ( 青 偏 蓝 ) 
绿 和 蓝 合成 青色 ， 当 绿色 减弱 时 青 偏 蓝 

B(〈 蓝 ) 十 R〈 红 | 减弱 ) 生成 MB ( 品 红 偏 蓝 ) 
蓝 和 红 合 成 品 红 ， 当 红色 减弱 时 品 红 偏 蓝 


B〔 蓝 | 减弱 ) 十 R( 红 ) 生成 MR ( 品 红 偏 红 ) 
蓝 和 红 合成 品 红 ， 当 蓝 色 减 弱 时 品 红 偏 红 


对 RGB 三 基色 各 进行 8 位 编码 ， 这 三 种 基色 中 的 每 一 种 都 有 一 个 从 0〈 黑 ) ~255 
(白色 ) 的 亮度 值 范围 。 当 不 同 亮度 的 基色 混合 后 ， 便 会 产生 236X256X256 种 颜色 , 约 
为 1670 万 种 , 这 就 是 用 户 常 听 说 的 “ 真 彩色 ”。 电视 机 和 计算 机 的 显示 器 都 是 基于 RGB 


颜色 模式 来 创建 其 颜色 的 。 
2. CMYK 颜色 模式 


CMYK 颜色 模式 是 一 种 印刷 模式 。 其 中 四 个 
字母 分 别 指 青 (Cyan) 、 洋 红 (Magenta) 、 黄 
(Yellow) 、 黑 (Black) ， 在 印刷 中 代表 四 种 颜 
色 的 油墨 。CMYK 基于 减 色 模式 ， 由 光线 照 到 有 
不 同比 例 C、M、Y、K 油墨 的 纸 上 ， 部 分 光谱 被 
吸收 后 ， 反 射 到 人 了 眼 的 光 产生 颜色 。 在 混合 成 色 
时 ， 随 着 C、M、Y、K 四 种 成 分 的 增多 ， 反 射 到 
人 了 眼 的 光 会 越 来 越 少 ， 光 线 的 亮度 会 越 来 越 低 ， 
如 图 1-29 所 示 。 


3. HSB 颜色 模式 


色相 (Hue) 、 饱 和 度 〈Saturation) 和 亮度 
(Brightness) 也 许 更 适合 人 们 的 习惯 ， 它 不 是 将 
色彩 数字 化 成 不 同 的 数值 ， 而 是 基于 人 对 颜色 的 
感觉 ,让 人 觉得 更 加 直观 一 些 。 其 中 色相 (Hue) 
是 基于 从 某 个 物体 反射 回 的 光波 ， 或 者 是 透射 过 
某 个 物体 的 光波 ， 饱和 度 〈Saturation) ， 经 常 也 
称 作 chroma， 是 某 种 颜色 中 所 含 灰色 的 数量 多 
少 , 含 灰色 越 多 , 饱和 度 越 小 ; 亮度 (Brightness) 
是 对 一 个 颜色 中 光 的 强度 的 衡量 。 明 亮度 越 大 ， 
则 色彩 越 鲜艳 ， 如 图 1-30 所 示 。 

在 HSB 模式 中 , 所 有 的 颜色 都 用 色相 、 饱 和 
度 、 亮 度 三 个 特性 来 描述 。 它 可 由 底 与 底 对 接 的 
两 个 圆锥 体形 象 的 立体 模型 来 表示 。 其 中 轴 向 表 
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和 图 1-29 ,CMYK 颜色 模式 分 析 图 
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和 图 1-30 ,HSB 颜色 模式 分 析 图 
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示 亮 度 ， 自 上 而 下 由 白 变 黑 ; 径 向 表示 色 饱 和 度 ， 自 内 向 外 逐渐 变 高 ， 而 圆周 方向 ， 则 
表示 色调 的 变化 ， 形 成 色 环 。 


4. LAB 颜色 模式 


Lab 色彩 模式 是 以 数学 方式 来 表示 颜 
色 ， 所 以 不 依赖 于 特定 的 设备 ， 这 样 确保 
输出 设备 经 校正 后 所 代表 的 颜色 能 保持 其 
一 致 性 。 其 中 工 指 的 是 亮度 ，a 是 由 绿 至 
红 ; b 是 由 蓝 至 黄 ， 如 图 1-31 所 示 。 和 图 1-31 Lab 色彩 模式 分 析 图 


一 般 情况 下 ， 访 问 者 的 浏览 器 Netscape Navigator 和 Internet Explorer 选择 了 网 页 的 
文本 和 背景 的 颜色 ， 让 所 有 的 网 页 都 显示 这 样 的 颜色 。 但 是 ， 网 页 的 设计 者 经 常 为 了 视 
觉 效果 而 选择 了 自 定 义 颜色 。 自 定义 颜色 是 一 些 为 背景 和 文本 选取 的 颜色 ， 它 们 不 影响 
图 片 或 者 图 片 背景 的 颜色 ， 图 片 一 般 都 以 它们 自身 的 颜色 显示 。 自 定义 颜色 可 以 为 下 列 
网 页 元 素 独 自分 配 颜色 : 

口 背景 网 页 的 整个 背景 区 域 可 以 是 一 种 纯粹 的 自 定义 颜色。 背景 色 总 是 在 网 页 的 

文本 或 者 图 片 的 后 面 。 

口 普通 文本 ”网 页 中 除了 链接 之 外 的 所 有 文本 。 

口 超级 链接 文本 ”网 页 中 的 所 有 文本 链接 。 

口 已 被 访问 过 的 链接 文本 访问 者 已 经 在 浏览 器 中 使 用 过 的 链接 ,访问 过 的 文本 链 
接 以 不 同 的 颜色 显示 。 

口 当前 链接 文本 ” 当 一 个 链接 被 访问 者 单 击 的 瞬间 , 它 转换 了 颜色 以 表明 它 已 经 被 
激活 了 。 

对 于 制作 网 页 的 初学 者 可 能 更 习惯 

于 使 用 一 些 漂亮 的 图 片 作为 自己 网 页 的 背 

景 ， 但 是 ， 浏 览 一 下 大 型 的 商业 网 站 ， 你 

会 发 现 它 们 更 多 运用 的 是 白色 、 蓝 色 、 黄 

色 等 ， 使 得 网 页 显得 典雅 、 大 方 和 温 束 ， 

如 图 1-32 所 示 。 

在 上 面 的 网 页 中 ， 主 要 由 白色 背景 和 
蓝 色 、 黄 色 、 粉 红色 以 及 黑色 笔触 组 成 ， 
能 够 加 快 浏览 者 打开 网 页 的 速度 。 

一 般 来 说 ， 网 页 的 背景 色 应 该 柔和 一 
些 、 素 一 些 、 淡 一 些 , 再 配 上 深 色 的 文字 ， 
使 人 看 起 来 自然 、 和 舒畅 。 而 为 了 追求 醒目 
的 视觉 效果 ,可 以 为 标题 使 用 较 深 的 颜色 。 
常用 网 页 背景 颜色 列表 如 表 1-4 所 示 。 ” 所 图 1-32 色彩 简单 的 网 页 


#00000D | Ew | # Erno 


3 表 1-4 。 网 页 背景 颜色 与 文字 色彩 搭配 


#1FAFA 做 正文 的 背景 色 好 ， 淡 雅 
#E8FFES 做 标题 的 背景 色 较 好 
#E8ES8FF 做 正文 的 背景 色 较 好 ， 文 字 颜 色 配 黑色 
| ,ooco 上 配 黄色 白色 文字 较 好 
#E8D098 上 配 浅 蓝 色 或 蓝 色 文 字 较 好 
#EFEFDA 上 配 浅 蓝 色 或 红色 文字 较 好 
三 2F1D7 配 黑色 文字 素雅 ， 如 果 是 红色 则 显得 醒目 
#336699 配 白色 文字 好 看 些 
I | #66owcc 配 白色 文字 好 看 些 ， 可 以 做 标题 
i | #66cccc 配 白色 文字 好 看 些 ， 可 以 做 标题 
I | ,sex 配 白色 文字 好 看 些 ， 可 以 做 标题 
#479AC7 配 白 色 文字 好 看 些 ， 可 以 做 标题 
#00B271 配 白色 文字 好 看 些 ， 可 以 做 标题 
二 BFBEA 配 黑色 文字 比较 好 看 ， 一 般 作 为 正文 
#D5F3F4 配 黑色 文字 比较 好 看 ， 一 般 作为 正文 
配 黑色 文字 比较 好 看 ， 一 般 作为 正文 
本 0DAD2 配 黑色 文字 比较 好 看 ， 一 般 作为 正文 


#DDF3FF 配 黑色 文字 比较 好 看 ， 一 般 作为 正文 


此 表 只 是 起 一 个 抛砖引玉 的 作用 ， 读 者 可 以 发 挥 想象 力 ， 搭 配 出 更 有 新 意 、 更 醒目 
的 颜色 ， 使 网 页 更 具有 吸引 力 。 


和 中 44 色彩 推移 1 


色彩 推移 是 按照 一 定 规律 有 秩序 地 排 
列 、 组 合 色彩 的 一 种 方式 。 为 了 使 画面 丰富 
多 彩 、 变 化 有 序 , 网 页 设计 师 通 常 采 用 色相 
推移 、 明 度 推移 、 纯 度 推移 、 综 合 推移 等 推 
移 方式 组 合 网 页 色彩 。 

1. 色相 推移 

选择 一 组 色彩 , 按 色 相 环 的 顺序 ， 由 冷 
到 暧 或 者 由 上 暧 到 冷 进行 排列 、 组 合 。 可 以 选 
纯色 系 或 者 灰色 系 进行 色相 推移 , 实现 多 
种 颜色 渐变 的 网 页 效果 ， 如 图 1-33 所 示 。 


# [fuds5 


2. 明度 推移 


选择 一 组 色彩 ， 按 明度 等 差 级 数 的 顺 


学 |a4sd ||# fe6cal ||#|fdscl ||#|fabce | 


地 csszcd | 


#7836b1 


J 图 1-33 


黄色 一 洋红 一 紫色 渐变 
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序 ， 由 浅 到 深 或 者 由 深 到 浅 进 行 排列 、 组 合 
的 一 种 明度 渐变 组 合 。 一 般 都 选用 单 色 系列 
组 合 。 也 可 以 选用 两 组 色彩 的 明度 系列 按 
明度 等 差 级 数 的 顺序 交叉 组 合 ， 如 图 1-34 


所 示 。 .en 


3. 纯度 推移 


选择 一 组 色彩 , 按 纯度 等 差 级 数 或 者 比 

差 级 数 的 顺序 ,由 纯色 到 灰色 或 者 由 灰色 到 

纯色 进行 排列 组 合 ， 如 图 1-35 所 示 。 
4. 综合 推移 #7c7011 ||# lds952f ||#lesd1a7 ||#[e7dabl ]|#|efesc9 |# [fead? ||# fbPfl 
选择 一 组 或 者 多 组 色彩 按 色相 、 明 度 、 人 了 图 1-34 。 浅 神色 到 自 色 济 变 

纯度 推移 进行 综合 排列 、 组 合 的 渐变 形式 ， 由 于 色彩 三 要 素 的 同时 加 入 ， 其 效果 当然 要 


比 单项 推移 复杂 、 丰 富 得 多 ， 如 图 1-36 所 示 。 
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# [127384 ||# |3898a4 ||# |1cblc3 ||#[bseas ||#|azdle5 |#|99odc3 ||# alb4bb 2 ||#|e7bo7 ||# da4cl2 ||#|b61910 ||#|4fsse2 ||# soslfo ||# [eofcff | 


了 图 1-35 _, 蓝 绿色 纯度 网 页 效果 和 图 1-36 ,色相 与 明度 推移 效果 


一 、 填 空 是 Ea = 

1. 网 站 前 端的 主要 功能 是 ; 4 网 站 开发 完成 后 , 需要 进行 
和 和 等 方面 的 前 端 测试 。 

2. 互联 网 的 发 展 趋势 是 、 5. 取代 “拼接 式 ” 网 页 设计 风格 的 是 
和 . 设计 风格 。 


6. 所谓“ 扁平 化 ”设计 ， 就 是 据 弃 一 切 
_  ， 诸 如 阴影 ， 透视， 纹理 ， 渐 变 等 
将 “ 拟 物 化 ”设计 中 的 各 种 修饰 元 素 全 部 清除 ， 


仅 保 留 干 净利 落 的 内 容 ， 通 过 多 彩 的 
来 表现 设计 的 效果 。 

7. RGB 色彩 模式 是 工业 界 的 一 种 颜色 标 
准 ， 是 通过 对 


三 个 颜色 通道 的 变化 以 及 它们 相互 
之 间 的 达 加 来 得 到 各 式 各 样 的 颜色 。 


二 、 选 择 题 


1. 以 开发 的 角度 来 分 析 网 站 这 一 综合 性 软 
件 平台 ， 其 本 身 可 以 划分 为 两 个 主要 的 部 分 ， 即 


面向 的 网 站 前 端 ， 以 及 面向 服务 器 和 
底层 数据 的 网 站 后 端 。 

A. 开发 者 B. 设计 者 

C. 终端 用 户 ” D. 界面 

2. XHTML 是 基于 传统 的 发 展 

而 来 ， 并 以 XML 的 严格 规范 重新 订 制 的 结构 语 

A. SGML B. XAML 

C. WAML D. HIML 


3. 以 下 哪 一 种 元 素 不 属于 网 页 用 户 界面 的 
元 素 ? 
A. 页 头 B. 广告 
C. 页 脚 D. 导航 
4. 中 尺寸 的 横幅 Banner， 宽 度 为 
像素 。 


A. 1024 B. 768 
C. 1001 D. 468 
5. 微软 推出 了 基于 “扁平 化 ”设计 的 
设计 语言 ， 并 将 其 应 用 到 了 Windows 
8 操作 系统 中 。 
A. Moderm UI 
B. Metro UI 
C. Flat UI 
D. Quantum Paper 
6. 色彩 的 三 要 素 不 包括 
A. 色相 B. 饱和 度 
C. 热度 D. 亮度 
7. 电视 机 和 计算 机 的 显示 器 都 是 基于 
来 创建 其 颜色 的 。 
A. RGB 颜色 模式 
B. CMYK 颜色 模式 
C. HSB 颜色 模式 
D. LAB 颜色 模式 


三 、 简 答题 


1. 简 述 网 站 项 目 都 由 哪些 模块 构成 ， 开 发 
网 站 需要 应 用 到 哪些 标准 ? 

2. 未 来 的 互联 网 都 有 哪些 发 展 趋势 ? 

3. 网 站 的 前 期 策划 都 需要 进行 哪些 工作 ? 

4. 什么 是 用 户 界面 ? 用 户 界面 都 包含 哪些 
内 容 ? 其 设计 原则 包括 什么 ? 

5. 网 页 界面 设计 都 有 哪些 风格 ? 

6. 简 述 色彩 推移 的 几 种 方法 。 
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设计 网 页 元 素 


2.1 Photoshop 使 用 基础 
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早期 的 计算 机 显示 器 受 限 于 硬件 性 能 ， 只 支持 黑白 双色 ， 因 此 只 能 提供 命令 行 界面 
和 一 些 简单 的 矢量 图 形 ， 不 支持 显示 灰 度 色彩 ， 更 谈 不 上 显示 彩色 的 图 形 与 图 像 。 
Photoshop 系列 软件 的 设计 师 托 马 斯 。 诺尔 (Thomas Knoll) 在 1987 年 为 了 完成 其 博士 
论文 , 编写 了 一 个 简单 的 可 以 处 理 和 显示 黑白 色 和 灰 度 的 图 像 处 理 软件 Display, 并 与 其 
兄弟 约翰 。 诺 尔 〈John Knoll) 不 断 对 这 一 软件 进行 改进 ， 提 升 软件 性 能 和 增强 软件 的 功 
能 。 这 一 软件 就 是 今天 Photoshop 的 原型 。 

1988 年 ， 诺 尔 两 兄弟 在 完成 了 软件 的 一 次 较 大 幅度 的 改进 之 后 ， 听 取 用 户 的 意见 将 
其 更 名 为 Photoshop， 并 向 当时 Adobe 公司 的 艺术 总 监 罗素 。 布 衣 (Russell Brown) 展 
示 了 软件 的 功能 ， 引 起 了 Adobe 公司 极 大 的 兴趣 。 同 年 9 月 ，Adobe 公司 决定 收购 这 一 
软件 并 将 诺尔 兄弟 纳入 磨 下 。1989 年 4 月 ,Adobe 正式 与 诺尔 兄弟 签订 协议 ,将 Photoshop 
整体 收购 ， 承 担 未 来 产品 的 研发 和 改进 。 至 此 ，Photoshop 正式 成 为 Adobe 软件 家 族 的 
一 员 。 

Photoshop 软件 本 身 采 用 C++ 编写 ， 早 期 的 Photoshop 并 不 支持 Windows 这 一 当前 
最 流行 的 操作 系统 平台 ， 仅 支持 苹果 公司 的 Macintosh OS 系统 。 在 1991 年 6 月 发 布 的 
Photoshop 2.0 开始 支持 矢量 路 径 的 绘制 ， 1992 年 1 月 ，Photoshop 2.5 版 本 开始 支持 
Windows 操作 系统 ， 并 拓展 到 IRIX、Solaris 等 类 Unix 操作 系统 平台 ; 1994 年 发 布 的 
Photoshop 3.0 正式 支持 了 图 层 技术 (虽然 还 很 不 完善 ， 例 如 无 法 修改 已 经 创建 的 图 层 ， 
也 不 支持 矢量 图 层 技 术 ， 矢 量 图 形 只 能 以 位 图 的 方式 存储 在 图 层 中 ) ， 使 其 本 身 愈加 专 
业 化 。 

自 1996 年 的 Photoshop 4.0 发 布 之 后 , Adobe 取消 了 对 IRIX、Solaris 等 类 Unix 操作 
系统 的 支持 ， 并 对 早期 的 图 层 技 术 进 行 大 幅 革 新 ， 支 持 对 图 层 的 二 次 编辑 以 及 矢量 图 层 
技术 等 。 自 1998 年 发 布 的 Photoshop 5.0 开始 ，Adobe 公司 为 该 软件 提供 了 中 文 支持 ， 
增强 了 历史 记录 功能 和 色彩 管理 功能 ， 以 满足 各 种 行业 的 打印 和 印刷 需求 。 绝 大 多 数 国 
内 的 Photoshop 用 户 都 是 以 该 版 本 开始 了 解 和 学 习 这 一 软件 的 。 

由 于 越 来 越 多 的 网 页 设计 师 开始 使 用 Photoshop 来 设计 网 页 的 界面 效果 图 ， 很 多 用 
户 对 Photoshop 图 像 切 片 功能 的 呼声 越 来 越 高 , 在 1999 年 发 布 的 Photoshop 5.5 正式 集成 
了 ImageReady 软件 工具 ， 人 允许 设计 者 像 使 用 Fireworks 一 样 来 将 Photoshop 设计 方案 直 
接 输出 为 包含 图 像 资源 的 网 页 。 这 一 经 典 版 本 迅速 得 到 大 量 用 户 的 赞誉 ， 真 正 使 
Photoshop 成 为 经 典 的 行业 专业 软件 。 

随 着 计算 机 技术 的 发 展 ， 今 天 的 Photoshop 不 断 拓展 功能 和 增强 性 能 ， 并 不 断 与 全 
新 的 硬件 设备 结合 ， 越 来 越 多 的 用 户 投入 大 量 精力 来 学 习 这 一 软件 ， 并 将 其 应 用 到 实际 
的 生产 环境 中 。 


作为 最 新 版 本 的 Photoshop 软件 , Photoshop CC 采用 了 全 新 的 界面 体系 , 以 与 Adobe 
系列 软件 的 界面 设计 风格 保持 一 致 。 同 时 ，Photoshop CC 与 老 旧 的 版 本 相 比 ， 其 增强 了 
用 户 界面 的 自 定义 性 能 ， 其 主体 界面 如 图 2-1 所 示 。 

在 Photoshop 主体 界面 中 ， 主 要 分 为 6 个 功能 区 域 ， 包 括 1- 标 题 菜单 栏 、2- 工 具 选 
项 栏 、3- 工 具 箱 栏 、4- 图 像 内 容 区 、5- 压 缩 面板 栏 和 6- 展开 面板 栏 等 。 
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2-1 _Photoshop CC 主体 界面 


1. 标题 菜单 栏 


为 尽量 节省 界面 空间 , Photoshop 将 传统 应 用 程序 的 标题 栏 和 菜单 栏 合并 为 【标题 菜 
单 栏 】， 并 完整 地 整合 了 这 两 个 区 域 的 功能 ， 在 标题 菜单 栏 中 ， 最 左 侧 是 Photoshop 的 
软件 图 标 ， 然 后 是 11 个 菜单 按钮 ， 如 表 2-1 所 示 。 

表 2-1_， 标题 菜单 栏 中 的 菜单 按钮 

菜单 按钮 作 “用 

文件 朋 于 文件 级 别 的 各 种 操作 ， 包 括 设计 方案 的 打开 、 关 闭 以 及 资源 的 导入 和 导出 等 功能 

六 提供 对 当前 所 选 内 容 的 复制 、 剪 切 、 粘 贴 以 及 Photoshop 本 身 的 自 定义 设置 功能 
计 方 案 的 各 种 属性 ， 包 括 色彩 属性 、 尺 寸 属性 等 
各 种 编辑 操作 ， 包 括 新 建 、 复 制 、 粘 贴 等 ， 也 可 以 操作 图 层 的 各 种 蒙 版 
t 矢 量 文本 的 各 种 设置 和 修改 操作 
选区 的 各 种 设置 和 修改 操作 
滤 镜 是 供 滤 镜 库 以 及 各 种 滤 镜 的 快捷 应 用 方式 
3D 提供 三 维 图 层 的 相关 操作 以 及 三 维 建 模 等 功能 选项 
视图 是 供 设计 方案 的 查看 选项 ， 包 括 缩放 、 标 尺 、 参 考 线 等 工具 
窗口 提供 工作 区 方案 的 切换 以 及 各 种 面板 的 显示 和 隐藏 开关 
帮助 是 供 软件 的 帮助 信息 和 技术 支持 


2. 工具 选项 栏 


【工具 选项 栏 】 的 作用 是 根据 用 户 当 前 选择 的 操作 工具 ， 显 示 该 操作 工具 对 应 的 进 
阶 操作 选项 。 在 通常 情况 下 ， 当 某 个 Photoshop 的 工具 处 于 激活 状态 时 ，【 了 三 


Co 
a 


的 左 侧 都 会 显示 该 工具 可 以 进行 的 设置 或 操作 的 状态 。 例 如 ， 当 选中 了 【移动 工具 】 
之 后 ，【 工 具 选 项 栏 】 就 会 显示 移动 工具 的 各 种 设置 ， 包 括 移动 的 模式 是 以 组 的 方式 
移动 还 是 以 图 层 的 方式 移动 ) 和 排列 选项 等 ， 如 图 2-2 所 示 。 
ET 
图 2-2 【移动 工具 国 | 的 工具 选项 栏 


【工具 选项 栏 ] 还 有 一 个 作用 就 是 在 右 侧 提 供 工 作 区 方案 的 选项 , 显示 当前 Photoshop 
内 包含 的 系统 预 置 工作 区 方案 和 用 户 自 定义 的 工作 区 方案 等 .用户 可 以 单 击 该 下 拉 菜 单 ， 
选择 对 应 的 工作 区 方案 ， 改 变 Photoshop 软件 的 工作 区 布局 ， 如 图 2-3 所 示 。 


2-3 选择 工 作 区 方案 


3. 工具 箱 


【工具 箱 ] 的 作用 是 提供 Photoshop 图 形 绘制 和 图 像 设 计 所 必须 使 用 的 各 种 工具 按钮 。 
每 一 种 工具 按钮 都 代表 着 Photoshop 中 的 一 种 基本 功能 ， 如 图 2-4 所 示 。 


2-4 _Photoshop CC 工具 箱 的 所 有 工具 
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在 图 2-4 中 ,展示 了 Photoshop【 工 具 箱 】 中 每 一 个 工具 按钮 以 及 该 按钮 对 应 的 选项 
菜单 ， 每 一 个 选项 菜单 包含 若干 个 按钮 。 早 期 的 Photoshop【 工 具 箱 】 往 往 只 包含 少量 的 
工具 ， 随 着 Photoshop 版 本 的 提升 和 功能 的 增强 , 【工具 箱 】 中 的 工具 按钮 也 逐渐 增加 。 
在 Photoshop CC 版 本 中 ， 共 提供 了 72 种 工具 按钮 。 出 于 篇 幅 的 考虑 ， 在 此 将 不 一 一 
资 述 。 

4， 图像 内 容 区 


【图 像 内 容 区 】 的 作用 是 显示 当前 Photoshop 正在 编辑 的 图 像 预览 图 ， 以 及 对 该 图 像 
的 编辑 效果 。【 工 具 箱 】 中 的 各 种 工具 都 可 以 对 【图 像 内容 区 】 中 的 内 容 进 行 操作 。 

在 PhotoshopCC 中 ， 用 户 可 以 同时 打开 多 个 图 像 或 设计 方案 ，【 图 像 内 容 区 】 将 以 
选项 卡 的 方式 来 显示 这 些 图 像 或 设计 方案 。 用 户 可 以 通过 【图 像 内 容 区 】 顶 部 的 选项 卡 
来 对 多 个 被 编辑 的 图 像 进 行 切换 。 

例如 ， 同 时 打开 1-2.bmp 和 1-3.bmp 等 两 幅 图 像 ， 单 击 1-3.bmp 图 像 的 选项 卡 ， 即 
可 显示 该 图 像 的 预览 效果 ， 如 图 2-5 所 示 。 
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2-5 ,显示 第 二 个 图 像 内 容 选 项 卡 


【图 像 内 容 区 】 的 下 方 提供 了 一 个 状态 栏 ， 该 状态 栏 有 两 种 功能 ， 其 一 是 在 左 侧 显 
示 当 前 图 像 或 设计 方案 的 缩放 比例 ， 并 允许 用 户 输入 数字 来 设置 个 性 化 的 缩放 比例 ， 其 
-是 在 缩放 比例 右 侧 显 示 当 前 图 像 文 档 或 设计 方案 的 实际 文件 大 小 和 压缩 文件 大 小 。 

如 果 当 前 打开 的 图 像 文 档 或 设计 方案 超出 了 【图 像 内容 区 】 的 显示 范围 ， 则 图 像 内 
容 区 会 在 右 侧 和 下 方 显示 滚动 条 ， 人 允许 用 户 拖 奥 滚动 条 来 查看 图 像 的 完整 内 容 。 


5. 压缩 面板 栏 和 展开 面板 栏 


在 Photoshop CC 中 ,用 户 可 以 采用 软件 预 置 的 工作 区 方案 , 或 自行 修改 和 定义 工作 
区 方案 。 每 一 种 工作 区 方案 都 会 特定 地 在 【压缩 面板 栏 】 和 【展开 面板 栏 】 显 示 几 个 相 
关 的 面板 ， 每 一 个 面板 都 会 提供 指定 的 若干 功能 。 
【压缩 面板 栏 】 和 【展开 面板 栏 】 的 作用 是 显示 一 些 常见 的 面板 或 面板 的 快捷 按钮 。 
其 中 , 面板 的 快捷 按钮 会 显示 在 压缩 面板 栏 , 而 普通 展开 的 面板 则 会 显示 在 展开 面板 栏 。 


以 默认 的 “基本 功能 ”工作 区 布局 为 例 ， 其 会 在 压缩 面板 栏 中 显示 【历史 纪录 】 面 
板 和 【属性 】 面 板 的 快捷 按钮 ， 并 在 展开 面板 栏 中 分 别 将 【颜色 】 和 【【 色 板 】,， 【调整 】 
和 【样式 】， 以 及 【图 层 】、【 通 道 】 和 【路 径 】 等 面板 编 为 3 组 来 显示 ， 如 图 2-6 所 示 。 


2-6 。“ 基 本 功能 ”的 工作 区 布局 面板 显示 


@--2.1.3 Photoshop 与 网 页 界面 设计 -、 


在 网 页 界面 的 效果 设计 行业 中 , Photoshop 具有 重要 的 作用 。 具体 到 实际 的 设计 工作 
中 ， 其 主要 承担 了 以 下 儿 种 工作 。 


1. 绘制 和 管理 界面 元 素 


Photoshop 提供 了 【钢笔 】 工具 国 、【 算 形 】 工 具 国 等 一 系列 矢量 图 形 绘制 工具 ， 
允许 用 户 绘制 各 种 按钮 、 导 航 栏 、 图 像 占 位 符 等 网 页 元 素 的 原型 。 同 时 ， 还 提供 了 图 层 
工具 ， 人 允许 用 户 方便 地 移动 、 调 节 这 些 矢量 图 形 元 素 的 位 置 、 尺 寸 ， 形 成 网 页 界面 的 原 
型 设计 图 。 

除 此 之 外 , Photoshop 还 提供 了 快捷 的 资源 导入 和 导出 工具 , 辅助 用 户 将 外 部 的 各 种 
素材 资源 导入 到 当前 的 设计 方案 中 ， 高 效 地 将 若干 设计 资源 整合 成 一 个 完整 的 方案 。 

另外 ， 由 于 Photoshop 提供 了 完整 的 矢量 图 形 编辑 和 保存 功能 ， 也 可 以 帮助 用 户 方 
便 地 根据 实际 需求 来 快速 调整 设计 方案 ， 响 应 客户 的 各 种 需求 。 

在 使 用 Photoshop 进行 原型 设计 时 ， 为 提高 原型 的 绘制 效率 ， 用 户 可 以 结合 数位 板 
等 工具 ， 快 速 通过 线条 来 实现 原型 的 绘制 ， 如 图 2-7 所 示 。 


2. 设计 界面 元 素 的 效果 
除了 进行 原型 设计 外 ， 用 户 也 可 以 借助 Photoshop 的 各 种 图 层 样式 、 混 合 模式 以 及 
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等 ， 设 计 网 页 界面 中 的 页 头 、 导 航 、 条 幅 、 内 容 区 域 、 侧 栏 和 页 脚 等 界面 
让 界面 皮肤 并 添加 各 种 投影 、 描 边 等 效果 ,实现 完整 的 界面 元 素 效果 设计 ， 


如 图 2 -8 所 示 。 
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图 2-8_。 界 面 元 素 效果 设计 
3. 处 理 网 页 图 像 


Photoshop 为 用 户 提供 了 强大 的 色彩 调节 、 滤 镜 以 及 各 种 绘制 工具 , 使 用 Photoshop， 
用 户 可 以 方 使 地 处 理 各 种 照片 素材 和 设计 文稿 ， 将 其 修改 和 转换 为 网 页 界面 所 需 的 各 种 
图 像素 材 ， 如 Logo 图 像 、 条 幅 1 背景 


景 、 页 面 背景 


40 


实际 上 处 理 网 页 图 像 是 Photoshop 在 网 页 设计 中 最 主要 的 功能 。 绝 大 多 数 网 站 所 使 
的 图 像素 材 ， 都 需要 先 经 过 Photoshop 的 处 理 ， 才 能 输出 并 上 传 至 网 站 中 ， 如 图 2-9 
所 示 。 


2-9 _ 使 用 Photoshop 处 理 的 网 页 图 像 


早期 的 Photoshop 仅 支持 对 照片 等 位 图 图 像 进行 处 理 ， 随 着 其 功能 的 逐渐 增强 ， 如 
今 的 Photoshop 已 经 可 以 处 理 包 括 实景 照片 、 导 入 的 EPS、AI 等 格式 的 矢量 图 形 等 丰富 
的 网 页 素材 ， 也 可 以 直接 与 数位 板结 合 ， 由 用 户 手工 绘制 各 种 网 页 素材 。 除 此 之 外 ， 
Photoshop 还 提供 了 强大 的 矢量 绘制 工具 ,允许 用 户 自行 绘制 各 种 矢量 图 形 , 填充 颜色 和 
修改 笔触 等 , 使 得 很 多 用 户 以 往 必 须 依赖 Hustrator 或 CorelDraw 实现 的 矢量 绘制 工作 也 
可 以 逐渐 转移 到 Photoshop 上 来 。 
Photoshop 无 法 直接 编辑 由 Illustrator 导入 的 AI 格式 文件 和 由 CorelDraw 导入 的 CDR 文件 ， 也 无 法 
直接 编辑 PDF 或 EPS 文件 , 但 是 可 以 将 这 些 矢量 元 素 转换 为 Photoshop 形状 或 栅 格 化 为 位 图 来 进行 
处 理 。 


2.2 ”操作 Photoshop 


在 使 用 Photoshop 来 设计 网 页 界面 时 , 首先 应 先 了 解 Photoshop 的 基本 操作 , 包括 配 
置 Photoshop 的 性 能 和 单位 、 创 建设 计 方 案 ， 设 置 设 计 方案 的 图 像 和 画布 等 。 这 些 基 本 


的 操作 是 使 用 Photoshop 设计 网 页 界面 的 基础 。 


@--2.2.1 配置 Photoshop -、 


Photoshop 是 一 种 应 用 范围 十 分 广泛 的 图 像 设计 工具 ， 其 不 仅 应 用 于 网 页 界面 设计 ， 
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还 被 应 用 于 广告 设计 、 平 面 设计 、 出 版 和 印刷 等 多 个 领域 ， 因 此 ， 为 体现 在 各 种 行业 的 
适应 性 ， 默认 配置 往 往 并 不 适合 直接 用 于 网 页 界面 设计 ， 需 要 用 户 根据 网 页 设计 的 具 
体 需求 进行 个 性 化 订 制 。 


1. 配置 性 能 选项 


早期 的 Photoshop 采用 C++ 语言 编写 ， 调 用 Mac OS X 或 Windows 系统 自 带 的 各 种 
API 接口 来 开发 ， 更 注重 软件 的 通用 性 和 兼容 性 。 

随 着 计算 机 硬件 技术 的 不 断 发 展 ， 全 新 的 图 形 处 理 硬件 和 更 高 配置 的 计算 机 设备 不 
断 涌 现 ， 自 Photoshop CS4 开始 ，Adobe 公司 为 Photoshop 软件 增加 了 【性 能 】 选 项 ， 允 
许 用 户 根 据 实际 的 计算 机 硬件 来 配置 Photoshop 软件 所 占用 的 系统 资源 ， 最 大 限度 地 发 
挥 计 算 机 硬件 的 潜力 。 

在 Photoshop CC 中 ,Adobe 公司 进一步 强化 了 【性 能 】 选 项 的 功能 ， 并 为 Photoshop 
提供 了 最 新 的 计算 机 图 形 处 理 硬件 支持 , 包括 支持 最 新 的 Intel 酷 春 17 CPU 加 速 指令 集 ， 
以 及 最 新 的 nVidia 图 形 显示 卡 以 及 图 形 加 速 技术 等 。 

在 启动 Photoshop 之 后 ,用户 即 可 执行 【编辑 】I|【 首 选项 】I|【 性 能 】 命令 , 如 图 2-10 
所 示 。 
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2-10 ,执行 【性 能 】 命 令 


用 户 也 可 以 按 下 CtrlHK 组 合 键 ， 然 后 在 弹出 的 【首选 项 〗 对 话 框 中 单 击 左 侧 内 容 列 表 中 的 【性 能 】 
列表 项 目 ， 同 样 可 以 切换 至 【性 能 〗 选 项 中 。 


在 弹出 的 【首选 项 】 对 话 框 中 ， 即 可 查看 Photoshop CC 提供 的 【性 能 】 选 项 ， 其 主 
要 包括 四 个 分 支 功能 设置 ， 即 【内 存 使 用 情况 】、【 和 暂 存 盘 】、【 历史 记录 与 高 速 缓存 】 
和 【图 形 处 理 设 置 】 等 ， 如 图 2-11 所 示 。 


| 一 内存 使 用 情况 


可 用 内 存 ， 14506 MB 
理想 范围: 7978-10444 NB 
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一 历史 记录 与 高 训 比 存 


i 


文档 较 小 
点 认 
文档 较 大 


三 诸 
他 给 Photoshop 的 内 存量。 下 将 在 下 一 次 启动 Photosrop 时 效 ， 


发 了 图 2-11 。[ 性 能 】 首 选项 


以 上 4 种 分 支 功 能 中 , 【内存 使 用 情况 】 用 于 显示 当前 用 户 计算 机 的 物理 内 存 大 小 ， 
用 户 可 以 在 此 定义 Photoshop 实际 的 内 存 占 用 。 通 常情 况 下 ， 如 果 用 户 的 计算 机 物理 内 
存 较 大 ， 且 只 需要 单独 使 用 Photoshop 来 工作 的 话 ， 可 以 将 其 设置 得 尽 可 能 大 一 些 。 而 
如 果 用 户 需要 使 用 多 种 软件 协作 工作 ， 则 应 合理 地 分 配 这 些 软件 的 物理 内 存 占 用 。 

【和 暂 存 盘 】 功 能 用 于 在 用 户 物理 内 存 不 足 时 在 计算 机 磁盘 中 划分 出 一 部 分 文件 交换 
区 域 , 作为 虚拟 内 存 使 用 。 Photoshop 允许 用 户 自行 选择 某 一 个 磁盘 来 存放 这 部 分 虚拟 内 
存 文件 ， 通 常情 况 下 ， 建 议 用 户 选择 剩余 空间 较 大 的 磁盘 分 区 。 


提 ” 示 


【 历史 记录 与 高 速 缓存 】 功 能 用 于 定义 当前 文件 保存 的 历史 记录 操作 次 数 ， 以 及 
用 于 提升 Photoshop 性 能 的 缓存 级 别 与 缓存 大 小 。 
在 网 页 界面 设计 中 ， 由 于 经 常 需 要 读 写 较 大 的 设计 
方案 文档 ， 且 经 常 需要 对 文档 进行 修改 维护 ， 建 议 
用 户 将 【历史 记录 状态 】 设 置 为 1000〈 即 最 大 ) ， 
【高 速 缓存 级 别 】 设 置 为 8，【 高 速 缓存 拼 贴 大 小 】 
设置 为 1028K 等 。 

【图 形 处 理 器 设置 】 功 能 可 以 定义 Photoshop 的 
CPU 加 速 功能 ， 使 Photoshop 调用 图 形 处 理 器 的 计 
算 资源 。 如 果 用 户 使 用 的 是 较 新 的 nVidia 图 形 处 理 
器 ， 则 可 以 勾 选 【使 用 图 形 处 理 器 】 选 项 ， 然 后 单 
击 下 方 的 【高 级 设置 】 按 钮 ， 打 开 【 高 级 图 形 处 理 [了 图 2-12 。【 高 级 图 形 处 理 器 设置 】 
器 设置 】 对 话 框 ， 如 图 2-12 所 示 。 对 话 框 
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在 【高 级 图 形 处 理 器 设置 】 对 话 框 中 , 用 户 可 以 根据 实际 的 硬件 配置 来 决定 选择 【 绘 
制 模式 】 和 下 方 的 4 种 扩展 选项 。 通常 情况 下 ,如 果 用 户 使 用 的 是 集成 显卡 或 核心 显卡 ， 
建议 不 要 勾 选 【使 用 图 形 处 理 器 】 选 项 ， 以 免 影响 Photoshop 的 运行 效率 。 

如 果 用 户 使 用 的 是 nVidia Geforce GTX 系列 显卡 或 nVidia Quadro 系列 显卡 ,建议 勾 
选 【使 用 图 形 处 理 器 】， 并 在 【高 级 图 形 处 理 器 设置 】 中 设置 【绘制 模式 】 为 “高 级 ”， 
勾 选 下 方 所 有 选项 ; 如 果 用 户 使 用 的 是 nVidia Geforce GTS 或 nVidia Geforce GT 系列 显 
上 ， 建 议 色 选 【 使 用 图 形 处 理 器 】， 并 在 【高 级 图 形 处 理 器 设置 】 中 设置 【绘制 模式 】 
为 “正常 ”， 勾 选 【 使 用 图 形 处 理 器 加 速 计算 】、【 使 用 OpenCL】 以 及 【对 参考 线 和 
路 径 应 用 消除 锯齿】; 如 果 用 户 使 用 的 是 nVidia Geforce 普通 显卡 ， 则 建议 勾 选 【使 用 
图 形 处 理 器 】， 并 在 【高 级 图 形 处 理 器 设置 】 中 设置 【绘制 模式 】 为 “基本 ”, 勾 选 【使 


用 图 形 处 理 器 加 速 计算 】 选 项 。 
注 意 


以 上 的 各 种 配置 方法 仅仅 为 建议 设置 ， 用户 应 根据 实际 的 硬件 配置 (包括 中 央 处 理 器 、 图 形 处 理 器 、 
物理 内 存 ) 等 和 实际 的 使 用 效果 来 决定 如 何 配 置 Photoshop 的 性 能 选项 。 


2. 配置 单位 和 标尺 


Photoshop 支持 多 种 度量 单位 体系 ,包括 用 于 计算 机 显示 器 的 相对 单位 体系 和 用 于 实 
际 印刷 、 绘 画 的 绝对 单位 体系 所 的 设计 工作 中 ， 用 户 应 该 根据 实际 的 设计 需求 
和 设计 的 方向 来 决定 使 用 什么 单位 来 定义 设计 方案 中 的 尺寸 。 

以 网 页 设计 为 例 ， 由 于 网 页 界面 的 显示 媒介 为 计算 机 显示 器 或 手机 显示 器 ， 这 两 种 
显示 器 都 以 相对 单位 像素 来 衡量 界面 元 素 的 尺寸 , 因此 在 使 用 Photoshop 来 设计 网 页 时 ， 
需要 更 改 Photoshop 的 默认 单位 以 及 对 应 的 适应 分 辩 率 。 

在 启动 Photoshop 之 后 ， 执 行 【 编 辑 】|【 首 选项】| 【单位 与 标尺 】 命 令 ， 如 图 2-13 
所 示 。 
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图 2-13 ,执行 【单位 与 标尺 】 命 令 


然后 ， 即 可 在 弹出 的 【首选 项 】 对 话 框 中 查看 单位 与 标尺 的 设置 ， 其 也 包含 4 种 分 
支 功能 设置 ， 包 括 【 单 位 】、【 列 尺寸 】、【 新 文档 预 设 分 辨 率 】 以 及 【点 / 派 卡 大 小 】 
等 ， 如 图 2-14 所 示 。 


和 图 2-14 。[ 单 位 与 标尺 】 首 选项 


在 【单位 与 标尺 】 的 首选 项 中 , 包含 【标尺 ] 和 【文字 】 两 个 选项 , 分 别 定义 Photoshop 
和 文字 的 单位 。 在 网 页 设计 工作 中 ， 用 户 应 将 这 两 个 选项 都 设置 为 “像素 ”， 以 满足 网 
页 界面 设计 的 需求 。 

【 列 尺 寸 】 的 首选 项 用 于 定义 印刷 和 出 版 设置 的 宽度 和 装订 线 ， 对 网 页 设计 没有 
影响 。 

【新 文档 预 设 分 辨 率 】 用 于 定义 新 建设 计 方案 时 文档 的 默认 分 辨 率 ， 用 户 应 根据 实 
际 的 设计 目标 来 定义 【打印 分 辨 率 】 和 【屏幕 分 辨 率 】， 应 设置 【屏幕 分 辨 率 】 为 “72 
像素 /英寸 ”。 

【点 / 派 卡 大 小 】 主 要 用 于 定义 像素 的 大 小 。 在 传统 的 印刷 行业 中 ， 采 用 的 是 1770 年 
法 国人 狄 道 (F.A.Didot) 制定 的 点 数 制 ， 即 在 印刷 设备 中 ， 每 英寸 包含 72.27 个 点 。 而 
在 现代 的 Web 浏览 器 中 ， 采 用 的 是 每 英寸 72 个 像素 ， 因 此 在 进行 网 页 界面 设计 时 ， 应 
选择 【PostScript (72 点 /英寸 ) 】 作 为 实际 的 派 卡 大 小 。 


在 了 解 了 Photoshop 关于 网 页 设计 的 各 种 配置 后 ， 即 可 着 手 来 学 习 创建 、 打 开设 计 
方案 ,以 及 设置 设计 方案 属性 的 方法 。 Photoshop 主要 支持 两 种 格式 的 设计 方案 文件 , 一 
种 是 PSD 格式 的 文件 , 用 于 存储 普通 的 Photoshop 设计 方案 , 男 一 种 则 是 PSB 格式 的 文 
件 ， 用 于 存储 高 分 辩 率 和 高 像素 容量 的 大 型 设计 方案 。 在 网 页 设计 中 ， 通 常 使 用 第 一 种 
格式 的 设计 方案 文件 即 可 。 


1. 创建 设计 方案 文件 FE 二 

rrr | 

在 Photoshop 中 ， 用 户 可 以 直接 执行 【文件 】 ea | 
【新 建 】 命令 ,或 按 下 Ctl+N 组 合 键 ， 即 可 打开 | rm rr 
【新 建 ] 对 话 框 , 设置 新 设计 方案 的 各 种 属性 信息 ， se 
如 图 2-15 所 示 。 Hae 


该 对 话 框 承 接 了 三 种 功能 ， 即 定 义 设计 方案 前 色相 友 首 :| 工作 中 的 RGB: ch6B IEC619-. =] 
的 临时 名 称 、 定 义 设计 方案 的 属性 ， 以 及 管理 创 |。 Ce 
建设 计 方案 时 的 预 置 属性 设置 ， 其 各 种 配置 功能 
如 表 2-2 所 示 。 和 图 2-15 【新 建 】 对 话 框 


5 表 2-2 。【 新 建 】 对 话 框 各 种 功能 设置 
功 能 作 用 

名 称 设置 设计 方案 的 临时 名 称 ， 当 保存 该 设计 方案 时 ， 这 一 临时 名 称 将 为 默认 的 文件 名 
预 设 的 设计 方案 属性 集合 ， 包 括 “ 剪 贴 板 ”“ 默 认 Photoshop 大 小 ^“ 美 国标 准 纸 
张 “ 国 际 标准 纸张 “照片 人 “Web”“ 移 动 设备 ”等 预 设 方案 ， 用 户 可 根据 实 
际 的 设计 需要 来 选择 ， 如 设计 网 页 界面 ， 可 选择 “Web” 选 项 
根据 用 户 选 择 的 预 设 ， 显 示 该 预 设 下 的 各 种 子 项 尺寸 ， 如 选择 了 “Web” 预 设 ， 可 
显示 “800X600”、“1024X768”、“1152x864”、“1280X1024”、“1600X1200”“ 中 


预 设 


大 小 等 矩形 ，300X250”"“ 和 矩形 ，180X 50”、“ 告 示 牌 ，728x90”"、“ 宽 坚 长 矩形 ，160 
X600” 等 预 设 尺寸 

宽度 设置 设计 方案 的 宽度 值 和 单位 

高 度 设置 设计 方案 的 长 度 值 和 单位 

分 辨 率 设置 设计 方案 的 分 辨 率 和 单位 

颜色 模式 设置 设计 方案 所 采用 的 颜色 模式 ， 包括 “位 图 ~“ 灰 度 ” “RGB 颜色 ” “CMYK 
颜色 ”“LAB 颜色 ”等 ， 在 网 页 界面 设计 中 ， 推 荐 采用 “RGB 颜色 ”和 “8 位 ” 
设置 设计 方案 的 背景 模式 ， 如 选择 “白色 ”， 将 显示 一 个 白色 的 背景 锁定 图 层 ， 如 

背景 内 容 选择 “背景 色 ”， 则 可 以 定义 一 个 指定 颜色 的 背景 锁定 图 层 ， 如 选择 “透明 ”， 则 可 
以 定义 一 个 包含 透明 背景 色 的 普通 图 层 ， 如 选择 “其 他 ”， 则 将 显示 一 个 拾 色 器 ， 
允许 用 户 自行 选择 背景 锁定 图 层 的 颜色 

颜色 配置 文件 设置 设计 方案 锁 采用 的 颜色 配置 ， 包括 Adobe RGB、Apple RGB 等 等 。 在 网 页 界 
面 设计 中 ， 推 荐 选择 “sRGB IEC61966-2.1” 国 际 标准 颜色 配置 方案 
设置 该 设计 方案 每 个 像素 点 的 形状 ， 在 网 页 界面 设计 中 ， 推 荐 选择 “方形 像素 ” 

确定 单 击 此 按钮 即 可 根据 配置 创建 设计 方案 

取消 单 击 此 按钮 可 取消 当前 创建 设计 方案 的 操作 

存储 预 设 单 击 此 按钮 后 ， 可 以 将 当前 对 设计 方案 的 配置 存储 为 自 定义 的 文档 预 设 ， 供 下 次 创 


建设 计 方 案 时 使 用 
删除 预 设 在 选择 自 定义 的 预 设 后 ， 可 单 击 此 按钮 将 自 定 义 的 文档 预 设 删除 


在 定义 了 设计 方案 的 各 种 配置 后 , 即 可 单 击 【 确 |。sswe ES 
定 】 按 钮 ,创建 设计 方案 。 Photoshop 提供 了 存储 文 | set ed 
档 预 设 的 功能 , 在 用 户 完成 设计 方案 的 各 种 配置 后 ， | SS” SR 
可 以 单 击 【 存 储 预 设 】 按 钮 ， 打 开 【 新 建文 档 预 设 】 © 
对 话 框 ， 如 图 2-16 所 示 。 


在 该 对 话 框 中， 用 户 可 以 选择 需要 保存 的 配置 7 图 2-16 。【 新 建文 档 预 设 】 对 话 杠 


电 避 


项 目 ， 将 其 作为 自 定 义 文 档 预 设 存储 起 来 备 未 来 新 建设 计 方案 时 使 用 。 


2. 打开 设计 方案 文件 


在 Photoshop 中 , 用 户 可 以 通过 两 
种 方式 打开 已 经 保存 的 设计 方案 ， 即 
通过 执行 【文件 】|【 打 开 】 命 令 打开 
设计 方案 ， 或 按 下 Ctrl+O 组 合 键 打开 
设计 方案 。 在 进行 了 以 上 两 种 操作 后 ， 
Photoshop 都 会 弹出 一 个 【打开 】 对 话 
框 ， 允 许 用 户 在 指定 的 路 径 中 选择 文 


WE /了 图 2-17 .打开 设计 方案 
| 技巧 | 


如 果 用 户 需 要 同时 打开 多 个 设计 方案 ， 则 可 以 在 【打开 】 对 话 框 中 首先 选择 一 个 设 
计 方 案 文 件 ， 然后 按 住 Ctrl 功能 键 ， 依 次 选择 需要 打开 的 设计 方案 , 单 击 【打开 】 按 钮 ， 
此 时 ，Photoshop 将 会 把 所 有 的 设计 方案 文件 都 打开 。 


提 ” 示 


3， 存 储 设计 方 案 文件 


在 完成 设计 方案 的 编辑 和 修改 
之 后 ， 用 户 可 以 执行 【文件 】|【 存 
储 】 命 令 ， 或 按 下 Ctrl+S 组 合 键 ， 
将 设计 方案 保存 为 文件 。 此 时 ， 
Photoshop 将 会 弹出 一 个 【另存 为 】 
对 话 框 ， 如 图 2-18 所 示 。 

【另存 为 】 对 话 框 的 绝 大 部 分 功 
能 与 普通 Windows 程序 的 存储 对 话 
框 极 为 类 似 ， 区 别 在 于 ， 其 在 【保存 
类 型 J 下 提供 了 Photoshop 特 有 的 【 存 
储 选项 】 功 能 ， 这 些 功 能 设置 如 表 和 图 2-18 。【 另 存 为 】 对 话 框 


山名 


直 司 手 泳 


3 
当 


元 


48 


2-3 所 示 。 


S23 表 2-3 。【 存 储 选 项 】 的 设置 与 功能 


设 置 项 功 能 
作为 副本 启用 该 复 选 框 ， 系统 将 存储 设计 方案 的 文件 副本 ， 但 是 并 不 存储 当前 设 
计 方 案 文件 ， 当 前 设计 方案 文件 在 Photoshop 中 仍然 保持 打开 状态 
注释 启用 该 复 选 框 ， 设 计 方案 的 注释 内 容 将 一 并 存储 
Alpha 通道 启用 该 复 选 框 ， 系 统 将 Alpha 通道 信息 和 设计 方案 一 并 存储 
洗 色 启用 该 复 选 框 ， 系 统 将 设计 方案 中 的 专 色 通道 信息 一 并 存储 
图 层 启用 该 复 选 框 ， 将 会 存储 设计 方案 中 的 所 有 图 层 


使 用 校 样 设置 
ICC 配置 文件 


缩 略 图 


应 用 CMYK 颜色 来 存储 设计 方案 
采用 sRGB IEC 61966-2.1 色彩 配置 文件 来 存储 设计 方案 

在 存储 设计 方案 时 保留 缩 略 图 供 Adobe Bridge 预览 (会 使 设计 方案 文件 
更 大 ) 


Photoshop 可 以 将 设计 方案 存储 为 多 种 类 型 的 格式 ， 除 了 将 其 保存 为 PSD、PDD 等 
标准 Photoshop 设计 方案 文档 ， 以 及 PSB 大 型 设计 文档 外 ， 还 可 以 将 其 保存 为 以 下 几 种 
文件 格式 ， 如 表 2-4 所 示 。 


2 表 2-4_，Photoshop 可 存储 的 其 他 图 像 文件 格式 


扩 展 名 文件 类 型 


* bmp、 *.rle、*.dib 


BMP 标准 位 图 


.dom *.dce3 *.dic 


*.eps, 
#.i 仔 、*tdi 


GIF 标准 文件 交互 格式 ， 包 括 包含 Alpha 通道 的 256 色 位 图 和 简单 动画 


医学 专业 数字 成 像 设 备 所 用 的 图 像 
Photoshop 和 Illustrator 定义 的 以 PostScript 描述 的 矢量 图 形 格式 
Amiga 或 Maya 等 三 维特 效 软件 设计 的 三 维 建 模 图 形 文件 


*jpeg、 *jpe、*jpg JPEG 通用 压缩 图 像 格式 ， 被 广泛 应 用 于 互联 网 


.ek i i es 
*j2k、*.jpe 


JPEG 通用 压缩 图 像 格式 的 升级 版 PEG2000 


*#.jps 支持 三 维 立体 结构 的 JPEG 通用 压缩 图 像 格 式 

*.pex 早期 DOS 操作 系统 下 的 通用 图 像 压缩 格式 

*.pdf、*.pdp Adobe PDF 便携 文件 格式 

* TaW 由 数码 相机 产生 的 原始 图 像 文件 

*. pxr PIXAR 工作 站 处 理 的 图 像 文件 

* png、 *.pns PNG 可 移动 网 页 图 像 ， 被 广泛 应 用 于 互联 网 ， 是 GIF 和 JPEG 的 替代 品 


*.pbm、*#.pgm、*.ppm、 
*.pnm、 *.pfm、*.pam 


PBM 可 移动 位 图 图 像 ， 早 期 的 跨 平 台 图 像 格式 


二 .SC 人 


*.tga、 *.vda、 *.icb、 *.vst 


各 人 、 村 和 全 


在 网 页 界面 设计 中 ， 


连续 色调 格式 ， 用 于 Scitex 计算 机 上 的 高 端 图 像 处 理 

Targa 图 像 格 式 ，True Vision 公司 为 其 显示 卡 开发 的 一 种 图 像 文件 格式 ， 
主要 用 于 实况 电视 

TIFF 图 像 格 式 ，Aldus 为 Macintosh 机 开发 的 一 种 图 形 文件 格式 ， 是 
Macintosh 和 PC 机 上 使 用 最 广泛 的 位 图 格式 , 主要 用 于 扫描 仪 呈献 的 高 
清晰 位 图 


通常 需要 设计 者 将 设计 方案 文档 保存 为 支持 图 层 的 可 编辑 图 


像 ， 主 要 为 PSD 格式 图 像 。 在 将 界面 设计 方案 输出 时 ， 应 尽量 将 其 保存 为 GIF、PNG、 


JPEG 等 格式 ， 以 保障 Web 浏览 器 能 够 正常 显示 。 


Photoshop 的 设计 方案 本 身 由 若干 图 层 构成 , 每 一 个 图 层 都 可 以 包含 矢量 图 形 、 文本 
和 位 图 图 像 ， 这 些 图 层 被 放置 在 一 个 虚拟 的 画布 上 。 在 了 解 了 Photoshop 设计 方案 文件 
的 操作 之 后 ， 用 户 还 需要 了 解 如 何 设置 画布 和 图 像 的 属性 ， 以 及 对 这 些 画 布 和 属性 进行 
旋转 操作 的 方法 。 


1. 设置 画布 


画布 是 Photoshop 的 一 个 由 纸张 绘画 引入 的 虚拟 概念 ， 在 Photoshop 的 设计 方案 中 ， 
所 有 的 图 形 、 图 像 、 文 本 都 被 放置 在 这 样 一 个 虚拟 的 画 
布 上 。Photoshop 人 允许 用 户 直接 修改 画布 大 小 ， 裁 剪 或 
扩张 设计 方案 的 显示 区 域 。 

在 Photoshop 中 执行 【图 像 】| 【画布 大 小 】 命 令 ， 
即 可 打开 【画布 大 小 】 对 话 框 ， 如 图 2-19 所 示 。 

在 该 对 话 框 中 ,显示 了 当前 设计 方案 的 大 小 , 包括 
宽度 和 高 度 等 ， 也 提供 了 【新 建 大 小 】 的 选项 ， 允 许 用 
户 直接 更 改 当前 设计 方案 的 尺寸 以 及 变更 尺寸 之 后 的 
定位 方式 。 

【画布 大 小 】 对 话 框 提供 了 两 种 更 改 设计 方案 尺寸 《了 图 2-19 【画布 大 小 】 对 话 杠 
的 方式 , 一 种 为 绝对 数值 更 改 , 即 直 接 在 【宽度 】 和 【高 
度 】 的 右 侧 设置 新 的 尺寸 值 和 单位 ， 另 一 种 则 是 相对 更 改 的 方法 ， 即 选择 【相对 】 复 选 
框 ， 然 后 在 【宽度 】 和 【高 度 】 的 右 侧 设置 变更 的 尺寸 值 和 单位 ， 如 设置 的 值 为 正 数 ， 
表示 增加 ， 负 数 则 表示 减少 。 

【定位 】 设 置 表示 变更 尺寸 时 应 用 的 方向 ， 其 包含 了 8 个 分 支 按钮 ， 表 示 变 更 尺寸 
的 8 个 方向 ， 如 果 单 击 了 左 向 的 箭头 一 ， 表 示 对 画布 左 侧 增加 或 减少 尺寸 ， 其 他 按钮 依 
此 类 推 。 

例如 ， 原 设计 方案 的 画布 宽度 为 454 像素 ， 当 设置 新 的 尺寸 为 444 像素 并 单 击 向 左 
的 定位 按钮 ， 则 新 的 设计 方案 画布 宽度 将 为 444 像素 ， 且 所 有 设计 方案 中 的 元 素 都 将 左 
移 10 像素 。 


2. 设置 图 像 


除了 更 改 画 布 尺寸 外 , Photoshop 也 允许 用 户 更 改 图 像 的 尺寸 。 图像 尺寸 和 画布 尺寸 
的 区 别 在 于 ,更改 画布 尺寸 时 ， 设 计 方案 文档 中 的 所 有 元 素 大 小 不 变 ，Photoshop 会 对 整 
个 设计 方案 文档 进行 裁 切 或 扩展 ， 而 更 改 图 像 尺 寸 时 ， 则 所 有 设计 方案 文档 中 的 元 素 都 
会 等 比例 地 缩放 。 

在 Photoshop 中 ， 执 行 【 图 像 】| 【图像 大 小 】 命 令 ， 或 按 下 Ctl+AlttI 组 合 键 ， 即 


可 打开 【图 像 大 小 】 对 话 框 ， 如 图 


2-20 所 示 。 es St 像 于 x 659 像素 w 

在 【图 像 大 小 】 对 话 框 中 ， 左 im 办 [RE 
侧 提供 了 当前 设计 方案 的 局 部 预 = 
览 ， 用 户 可 以 使 用 鼠标 在 该 预览 区 0: 
域内 拖 电 预 览 位 置 。 在 对 话 框 右 侧 ， ae 
Photoshop 提供 了 以 下 几 种 功能 。 EE 

口 图 像 大 小 ”显示 当前 设计 

方案 文档 的 文件 大 小 。 图 2-20 【图 像 大 小 】 对 话 框 
口 尺寸 显示 当前 设计 方案 


的 图 像 尺 寸 ， 单 击 左 侧 的 下 拉 按 钮 可 以 更 改 单位 。 

口 调整 为 ”调用 Photoshop 的 预 设 尺寸 和 分 辨 率 , 直 接应 用 到 当前 设计 方案 文档 上 。 
口 宽度 设置 当前 设计 方案 文档 的 宽度 值 和 单位 。 

口 高 度 设置 当前 设计 方案 文档 的 高 度 值 和 单位 。 

口 分 辨 率 设置 当前 设计 方案 文档 的 分 辨 率 值 和 单位 。 

口 重新 采样 ”更 改 当前 设计 方案 的 像素 采样 计算 方式 。 

在 修改 设计 方案 的 宽度 和 高 度 时 ， 用 户 可 以 单 击 【宽度 】 和 【高 度 】 之 间 的 链条 图 

标 回 ， 约 束 设计 方案 的 长 宽 比 。 


3. 旋转 画布 与 视图 


Photoshop 为 用 户 提 供 了 强大 的 图 像 旋转 工具 ， 人 允许 用 户 自 由 地 对 画布 进行 旋转 操 
作 。 在 Photoshop 中 执行 【图 像 】| 【图像 旋转 】 命 令 ， 即 可 查看 到 Photoshop 的 图 像 旋 
转 系 列 工具 ， 如 图 2-21 所 示 。 
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模式 (M) 
调整 U) 


自动 色调 (N) Shift+ Cerl+L 
自动 对 比 度 (U) Alt+Shift+Ctrl+L 
自动 磊 色 (O) Shift+ Ctrl+B 


Alt+Curl+L 
Al+Ctri+C 
180 度 (1) 
号 + 90 度 (9) 
裁 切 (R)-… 送 时 针 90 度 (0) 
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了 Photoshop 的 图 像 旋 转 系列 工具 可 以 分 为 两 类 , 一 类 是 直接 旋转 工具 , 另 一 类 是 翻转 
工具 ， 其 作用 如 表 2-5 所 示 。 


S23 表 2-5 ,Photoshop 的 图 像 旋转 系列 工具 


将 整个 设计 方案 旋转 180 度 
将 整个 设计 方案 顺 时 针 旋转 90 度 
将 整个 设计 方案 逆 时 针 旋转 90 度 
选择 此 项 则 将 弹出 一 个 对 话 框 ， 人 允许 用 户 自行 定义 设计 方案 旋转 的 角度 
将 整个 设计 方案 从 水 平方 向 翻转 
将 整个 设计 方案 从 垂直 方向 翻转 


图 像 旋 转 系 列 工具 主要 应 用 于 整个 画布 上 所 有 的 内 容 。 如 果 用 户 仅仅 需要 旋转 局 部 
的 某 个 元 素 ， 请 参考 之 后 的 相关 内 容 。 


逆 时 针 90 度 
任意 角度 
水 平 翻转 画布 


“ 它 山 之 石 ， 可 以 攻 玉 ”， 在 网 页 界面 设计 中 ， 使 用 现 有 成 熟 的 素材 文件 来 进行 二 
次 设计 是 提高 设计 效率 的 有 效 办 法 。Photoshop 不 仅 为 用 户 提 供 了 强大 的 图 像 处 理 功能 ， 
也 同时 提供 了 强大 的 素材 置 入 能 力 , 帮助 开发 者 将 更 加 丰富 的 素材 置 入 到 Photoshop 中 。 

通常 情况 下 ,Photoshop 允许 用 户 以 两 种 方式 将 外 部 的 素材 文件 置 入 到 当前 设计 方案 
文档 中 ， 包 括 将 外 部 的 素材 文件 以 嵌入 的 方式 置 入 ， 以 及 以 链接 的 方式 置 入 。 这 两 种 方 
式 的 区 别 在 于 , 如 以 柜 入 的 方式 置 入 素材 文件 , 则 外 部 的 素材 文件 将 被 整合 到 Photoshop 
设计 方案 文档 的 内 部 ， 而 以 链接 的 方式 置 入 素材 文件 时 ， 则 外 部 的 素材 文件 仅仅 和 
Photoshop 设计 方案 文档 保持 链接 关系 ， 并 不 会 被 嵌入 到 Photoshop 设计 方案 文档 中 。 

这 两 种 置 入 素材 的 方式 各 有 优 劣 。 以 嵌入 的 方式 置 入 素材 ， 其 优点 是 可 以 完全 地 将 
素材 加 载 到 当前 设计 方案 文档 中 ， 这 样 ， 无 论 对 源 素 材 文件 进行 移动 、 修 改 或 删除 ， 都 
不 会 影响 设计 方案 文档 的 内 容 ， 同 理 ， 对 设计 方案 文档 的 移动 操作 也 不 会 丢失 素材 源 文 
件 的 链接 。 但 其 缺点 是 会 造成 设计 方案 文档 过 于 庞大 ， 如 果 多 个 设计 方案 文档 引用 了 一 
个 素材 ， 且 该 素材 需要 修改 并 应 用 到 所 有 设计 方案 文档 时 ， 需 要 设计 者 逐个 修改 设计 方 
案 文档 。 

以 链接 的 方式 置 入 素材 ， 其 优点 是 可 以 将 整个 网 站 的 界面 设计 方案 模块 化 ， 将 每 一 
个 通用 模块 以 素材 文件 的 方式 独立 存储 ， 并 链接 到 若干 设计 方案 文档 中 。 这 样 ， 一 旦 某 
个 模块 需要 修改 ， 设 计 者 可 以 只 修改 模块 所 在 的 素材 文件 ， 即 可 自动 应 用 到 所 有 调用 这 
一 模块 的 设计 方案 文档 中 。 同 时 ， 这 种 方案 还 可 以 大 量 减 少 设计 方案 文档 的 文件 大 小 。 
当然 , 这 种 方案 也 有 缺点 , 就 是 一 旦 设计 方案 文档 和 素材 文件 之 间 相对 路 径 位 置 被 改变 ， 
则 存在 链接 素材 失效 的 问题 。 

在 实际 的 设计 工作 中 ， 用 户 可 以 通过 执行 【文件 】| 【和 置 入 嵌入 的 智能 对 象 】 命 令 来 
将 外 部 的 素材 嵌入 到 当前 设计 方案 文档 中 ， 如 图 2-22 所 示 。 

然后 ， 即 可 通过 弹出 的 【 置 入 嵌入 对 象 】〗 对 话 框 查找 需要 导入 的 素材 ， 如 图 2-23 
所 示 。 
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2-22_。 置 入 嵌入 的 智能 对 象 
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2-23 。【 置 入 嵌入 对 象 】 


选择 需要 置 入 设计 方案 文档 的 素材 ， 并 单 击 【 置 入 】 按 钮 ， 即 可 将 其 置 入 到 当前 设 
计 方 案 文档 中 ， 如 图 2-24 所 示 。 

Photoshop 通常 会 将 置 入 的 外 部 素材 以 智能 对 象 的 方式 存储 ,如果 用 户 需 要 编辑 这 些 
外 部 素材 ， 可 以 直接 在 【图 层 】 面 板 中 双击 该 素材 的 智能 对 象 ， 然 后 调用 对 应 的 编辑 器 
来 对 其 进行 编辑 。 

以 链接 的 方式 来 置 入 外 部 素材 , 其 方式 与 嵌入 外 部 素材 类 似 , 用 户 可 以 通过 执行 【 文 
件 】I【 置 入 链接 的 智能 对 象 ] 命 令 来 将 外 部 的 素材 链接 到 当前 设计 方案 文档 中 , 如 图 2-25 
所 示 。 


2-24_。 置 入 的 外 部 素材 
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图 2-25_。 置 入 链接 的 智能 对 象 


在 导入 智能 对 象 之 后 ， 用 户 可 以 在 【工具 箱 〗 中 激活 【移动 工具 】 国 ， 外 后 将 各 能 对 象 移动 到 画布 
中 任意 位 置 .【 移 动工 具 】 国 吉 以 快 过 移动 绝 大 多 教 Photoshop 画布 中 的 元 素 ， 包 括 图 层 内 的 位 图 
元 素 、 矢 量 元 素 、 智 能 对 象 、 选 区 等 。 


@- -2.2.5 一 图 像 的 变换 与 变形 -、 


在 置 入 外 部 素材 后 ， 用 户 可 以 使 用 Photoshop 提供 的 一 系列 变换 工具 ， 对 图 像 进 行 
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变换 和 变形 处 理 ， 使 素材 能 够 更 加 满足 实际 的 设计 需要 。 变 换 与 变形 等 系列 工具 不 仅 可 
应 用 于 置 入 的 智能 对 象 ， 还 可 以 应 用 于 文本 、 选 区 、 图 层 、 矢 量 路 径 、 蒙 版 、 通 道 等 。 
掌握 变换 与 变形 工具 ， 可 以 有 效 地 帮助 用 户 快速 更 改 图 像 或 图 形 元 素 ， 完 善 界面 设计 
方案 。 

在 Photoshop 中 选中 需要 变换 或 变形 的 元 素 之 后 ， 即 可 执行 【编辑 】|【 变 换 】 系 列 
命令 ， 对 元 素 进行 变形 操作 ， 如 图 2-26 所 示 。 
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图 2-26 ,变换 和 变形 的 系列 命令 

Photoshop 为 变换 提供 了 12 种 进 阶 命令 ， 其 可 分 为 4 类 ， 即 重复 变换 、 基 本 变换 、 
旋转 变换 和 翻转 变换 ， 如 表 2-6 所 示 。 
225 表 2-6 Photoshop 的 变换 及 变形 


重复 上 一 次 变换 操作 


沿 着 水 平和 垂直 方向 拉 伸 ， 或 挤 压 图 像 内 的 一 个 区 域 来 修改 该 区 
域 的 大 小 


按照 顺 时 针 或 逆 时 针 的 顺序 手动 旋转 图 像 


沿 水 平 轴 或 垂直 轴 的 方向 以 倾斜 的 角度 来 调节 图 像 的 内 容 


按照 图 像 的 四 个 边 角 来 调节 图 像 的 内 容 


挤 压 或 拉 伸 图 像 的 单个 边 来 调节 图 像 的 内 容 


以 图 像 的 边 上 若干 点 调节 整个 图 像 的 内 容 


以 180 度 的 角度 来 旋转 图 像 


顺 时 针 旋转 90 度 


顺 时 针 方 向 以 90 度 的 角度 来 旋转 图 像 


逆 时 针 方向 以 90 度 的 角度 来 旋转 图 像 0 


从 水 平方 向 翻转 图 像 


逆 时 针 旋 转 90 度 


水 平 翻转 


从 垂直 方向 翻转 图 像 


缩放 、 旋 转 、 斜 切 、 扭 曲 、 透 视 和 变形 等 类 型 的 变换 都 会 提供 若干 调节 柄 ， 用 户 可 
以 自行 用 鼠标 拖 电 调 节 柄 以 实现 具体 的 变换 效果 。 


2.3 ”使 用 图 层 


网 页 界面 的 设计 方案 文档 往往 会 包含 大 量 的 网 页 元 素 ， 当 这 些 网 页 元 素 都 存放 在 设 
计 方 案 文档 的 画布 上 时 , 必然 会 存在 一 个 层 登 的 顺序 。Photoshop 通过 图 层 的 概念 来 展现 
这 些 网 页 元 素 之 间 的 层 县 关系， 每 一 个 图 层 都 表示 一 个 完全 独立 地 、 存 放 于 画布 上 的 
元 素 。 


@--2.3.1 Photoshop 图 层 -、 


7 


图 层 就 像 一 张 张 堆 芭 在 一 起 的 透明 纸 ， 每 张 透明 纸 就 是 一 个 图 层 ， 这 多 张 透明 纸 将 
图 像 分 出 层次 ， 上 面 的 在 前 面 ， 下 面 的 在 后 面 。 并 且 透 过 图 层 的 透明 区 域 ， 可 以 观察 到 
下 面 的 内 容 ， 如 图 2-27 所 示 。 


在 了 图 2-27_ 图 层 的 原理 
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在 Photoshop 中 ， 用 户 为 设计 方案 绘制 或 添加 任何 元 素 ， 都 必须 依赖 图 层 。 图 层 技 
术 的 应 用 ， 极 大 地 改进 了 Photoshop 的 软件 体验 ， 使 得 用 户 可 以 专心 致 志 地 编辑 某 个 
Photoshop 内 的 元 素 ， 

Photoshop 提供 了 多 种 类 型 的 图 层 ， 包 括 像素 图 层 (存储 位 图 ) 、 调 整 图 层 (存储 滤 
镜 和 调整 层 ) 、 文 字 图 层 〈 存 储 矢量 文本 ) 、 形 状 图 层 〈 存 储 矢量 形状 ) 以 及 智能 对 象 
图 层 〈 存 储 智能 对 象 ) 等 ， 每 一 种 图 层 都 承载 着 不 同类 型 的 设计 元 素 。 

在 实际 设计 工作 中 , 用 户 可 以 通过 多 种 方式 来 创建 图 层 。 Photoshop 的 设计 工作 基本 
上 都 是 围绕 图 层 而 实现 的 。 


--2:3.2 使 用 【图 层 】 面 板 - -， 


为 用 户 提供 操作 图 
首先 就 应 该 了 解 图 


所 示 。 


图 层面 板 主要 由 【第 选 】 工 具 栏 、【 混 合 模式 】 工 具 


栏 、【 属 性 】 工具 栏 、 


个 部 分 组 成 ， 共 同 帮助 用 户 对 图 层 进 行 操作 。 
1.【 筛 选 】 工 具 栏 


快速 筛选 。 其 为 ) 
如 图 2-29 所 示 。 


层 的 各 种 接口 。 在 学 习 操作 图 层 之 前 ， 
层面 板 中 的 各 种 功能 。 

在 Photoshop 中 ， 用 户 可 以 执行 【窗口 】 |【 图 层 】 
命令 , 或 按 下 F7 快捷 键 来 打开 或 关闭 【图 层 ] 面板 。 【图 
层 】 面 板 的 结构 与 其 他 Photoshop 面板 类 似 ， 如 图 2-28 


图 层 ， 对 【图 层 】 列 表 中 所 显示 的 图 层 进行 
j 户 提供 了 8 种 图 层 筛选 和 查找 的 方式 ， 


而 不 必 担 心 影响 其 他 元 素 。 


【图 层 】 列 表 和 【操作 】 状 态 栏 5 图 2-28 。【 图 层 】 面 板 


用 户 可 以 通过 以 上 8 种 第 选 方式 来 实现 精确 的 图 层 查 [yy 图 2_2p。 【入选 ] 工具 栏 


找 ， 其 使 用 方法 


| 表 2-7 所 示 。 的 8 种 筛选 方式 


2 表 2-7 筛选 工具 栏 的 筛选 方式 


筛选 方式 作 用 

类 型 根据 图 层 的 类 型 来 筛选 ， 支 持 筛选 像素 图 层 、 调 整 图 层 、 文 字 图 层 、 形 状 图 层 以 及 智能 
对 象 图 层 等 

名 称 根据 图 层 的 名 称 来 筛选 

效果 根据 图 层 的 样式 来 筛选 

模式 根据 图 层 的 混合 模式 来 筛选 

属性 根据 图 层 的 属性 来 筛选 

颜色 根据 图 层 的 标记 颜色 来 筛选 

智能 对 象 根据 智能 对 象 的 类 型 来 筛选 ， 包括 有 效 链接 的 智能 对 象 、 过 期 的 智能 对 象 ( 外 部 智能 对 

象 已 更 改 但 当前 文档 未 更 新 )、 缺 失 的 智能 对 象 以 及 嵌入 的 智能 对 象 等 
选 定 仅 显 示 当 前 已 经 选中 的 图 层 


网 页 的 设计 方案 文档 往往 包含 大 量 的 图 层 ， 使 用 【筛选 】 工 具 栏 ， 用 户 可 以 快速 根 
据 具体 的 需求 精确 地 找到 指定 的 图 层 进行 处 理 。 


2.【 混 合 模式 】 工 具 栏 


【混合 模式 】 工 具 栏 的 作用 是 即时 更 改 图 层 的 混合 模式 和 透明 度 ， 实 现 复 杂 的 图 层 
重 秋 效果 。 关 于 混合 模式 ， 请 参考 之 后 的 小 节 。 


3.【 属 性 】 工 具 栏 


【属性 】 工 具 栏 的 作用 是 提供 图 层 的 内 容 锁 定 功 能 和 更 改 图 层 的 填充 透明 度 ， 如 图 
2-30 所 示 。 
【属性 】 工 具 栏 提供 了 4 种 锁定 方式 ， 包 括 锁定 透明 
像素 、 图 像 像素 、 锁 定位 置 以 及 全 部 锁定 等 , 其 功能 如 下 。 《了 图 2-30 【属性 】 工 具 栏 
口 【锁定 透明 像素 ] 圆 ”锁定 图 层 中 的 透明 区 域 ， 禁 
止 使 用 【画笔 】 等 工具 对 透明 区 域 进行 绘 制 和 修改 。 
口 【锁定 图 像 像素 ] 图 锁定 图 层 中 的 图 像 像素 ， 禁 止 对 图 像 像素 进行 变形 、 局 部 
删除 等 修改 (但 允许 移动 其 位 置 )。 
口 【锁定 位 置 ] 图 锁定 图 层 中 图 像 像素 的 位 置 ， 但 允许 对 图 像 像素 进行 变形 、 局 
部 删除 等 修改 ， 也 允许 使 用 【画笔 】 等 工具 对 透明 区 域 进行 绘制 和 修改 。 
口 【锁定 全 部 】 图 锁定 整个 图 层 ， 禁 止 对 图 层 进行 任何 修改 操作 。 


注 意 
Photoshop 允许 用 户 同时 选择 多 种 锁定 方式 ， 以 实现 图 层 的 复 末 锁定 需求 。 | 
除了 修改 图 层 的 锁定 方式 外 ，【 属 性 】 工 具 栏 还 允许 用 户 修改 图 层 内 容 的 【填充 】 
透明 度 ， 其 与 【混合 模式 】 工 具 栏 的 【不 透明 度 】 区 别 在 于 ， 使 用 【混合 模式 】 工 具 栏 


的 【不 透明 度 】 来 设置 透明 度 会 同时 更 改 矢量 笔触 或 描 边 边框 的 透明 度 ， 而 使 用 【填充 】 
透明 度 ， 则 不 会 更 改 矢量 笔触 或 描 边 边框 的 透明 度 。 


4.【 图 层 】 列 表 


【图 层 】 列表 的 作用 是 显示 当前 界面 设 计 方案 文档 中 的 所 有 图 层 、 图 层 组 ， 或 由 【第 
选 】 工 具 栏 进行 第 选 和 检索 后 符合 要 求 的 图 层 结果 ， 如 图 
2-31 所 示 。 

【图 层 】 列 表 分 为 两 个 部 分 ， 其 中 左 侧 的 纵 列 为 图 层 的 
可 见 性 开关 , 右 侧 的 纵 列 则 显示 图 层 、 图 层 组 的 名 称 和 预览 
以 及 锁定 状态 等 。 
有 户 可 以 单 击 左 侧 的 【指示 图 层 可 见 性 】 开 关 来 决定 图 
层 是 否 在 画布 中 显示 ， 如 果 访 a 太 前 3 和 
表示 该 图 层 或 该 图 层 组 下 的 所 有 图 层 在 画布 中 处 于 显示 状 

态 :而 如 果 该 开关 显示 为 一 个 空心 矩形 图 标量 ， 则 表示 该 图 层 或 该 图 层 组 下 的 所 有 图 层 
在 画布 中 处 于 隐藏 状态 。 
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5.【 操 作 】 状 态 栏 
【操作 】 状 态 栏 的 作用 是 为 用 户 提供 各 种 修改 、 关 联 图 层 的 工具 ， 帮 助 用 户 更 好 地 


en 
【操作 】 状 态 栏 共 为 用 户 提供 了 7 种 针对 图 层 或 图 ee 
层 组 的 按钮 ， 其 功能 如 表 2-8 所 示 。 人 图 2-32 。 【操作 】 状态 栏 


5 表 2-8 。 【操作 】 状 态 栏 的 功能 按钮 


将 若干 图 层 或 图 层 组 组 成 链接 状态 ， 被 链接 的 图 层 会 维持 相互 之 间 的 
位 置 关系 ， 一 旦 移动 其 中 任意 一 个 图 层 中 的 内 容 位 置 ， 所 有 存在 链接 
关系 的 图 层 都 会 同步 移动 

添加 图 层 样式 “| 为 若干 图 层 层 组 下 的 所 有 图 层 添加 指定 的 图 层 样式 
添加 图 层 蒙 版 “| 为 若干 图 层 或 图 层 组 下 的 所 有 图 层 添加 图 层 蒙 版 


创建 新 的 填充 二 顺序 下 图 层 一 个 图 层 》 或 调整 图 层 
或 调整 图 层 为 指定 图 层 顺序 下 的 所 有 图 层 或 指定 某 一 个 图 层 添加 填充 或 调整 图 层 


创建 新 组 创建 一 个 空 的 图 层 组 
创建 一 个 新 的 图 像 图 层 
删除 所 选 的 若干 图 层 或 图 层 组 


删除 图 层 


关于 图 层 样式 、 图 层 组 以 及 图 层 蒙 版 等 相关 功能 ， 请 参考 之 后 相关 小 节 。 


9 -239 一 图 层 的 分 组 ” -， 

早期 的 Photoshop 仅 支 持 图 层 功能 , 此 时 用 户 设计 的 Photoshop 文档 内 如 果 包 含 大量 
的 图 层 ， 则 这 些 图 层 往往 被 以 混乱 的 顺序 罗列 到 了 【图 层 】 
列表 中 ， 在 不 依赖 【筛选 】 工 具 栏 的 情况 下 ， 用 户 很 难 找到 
某 个 图 层 并 对 其 进行 修改 。 

基于 此 种 现状 ，Photoshop 设计 出 了 一 个 “图 层 组 ”的 
概念 ， 其 类 似 Windows 操作 系统 中 的 “文件 夹 ”， 允 许 用 
户 将 一 个 或 多 个 图 层 以 编组 的 形式 存放 ,并 允许 用 户 对 这 一 
编组 统一 应 用 混合 模式 、 样 式 、 批 量 进行 修改 操作 等 。 

用 户 可 以 双击 某 个 图 层 组 ,将 组 中 的 图 层 展开 显示 ， 以 
进行 单独 的 编辑 操作 ， 如 图 2-33 所 示 。 

图 层 组 和 图 层 组 之 间 可 以 存在 棋 套 的 关系 ， 也 就 是 说 ， 
户 可 以 在 一 个 图 层 组 之 内 建立 一 个 新 的 图 层 组 , 若干 图 层 。 
组 之 间 可 以 随意 相互 嵌 套 ， 用 户 可 以 通过 鼠标 拖 电 【 图 层 】 人 了 图 2-33 。 展 开 的 图 层 组 
列表 中 的 图 层 或 图 层 组 ， 来 实现 图 层 组 的 组 合 和 重组 。 


e--234= 图 层 的 混合 模式 -、 


混合 模式 是 Photoshop 为 图 层 或 图 层 组 提供 的 一 种 像素 级 别 的 图 像 琶 加 融合 功能 ， 
其 允许 将 若干 图 层 以 多 种 方式 来 熔 合 ， 形 成 新 的 混合 显示 效果 。 


混合 模式 在 图 像 处 理 中 主要 用 于 调整 颜色 和 混合 图 像 。 使 用 混合 模式 进行 颜色 调整 

时 ， 会 利用 源 图 层 副 本 与 源 图 层 进行 混合 ， 从 而 达到 调整 图 像 颜色 的 目的 。 在 编辑 过 程 

中 会 出 现 三 种 不 同类 型 的 图 层 ， 即 同 源 图 层 、 异 源 图 层 和 灰色 图 层 。 

口 同 源 图 层 “背景 副本 ”图 层 是 由 “背景 ”图 层 复制 而 来 ， 两 个 图 层 完全 相同 ， 
那么 “背景 副本 ”图 层 称 为 “背景 ”图 层 的 同 源 图 层 。 

口 异 源 图 层 ”如 果菜 个 图 层 是 从 外 面 拖 入 的 一 个 图 层 ， 并 不 是 通过 复制 “背景 ”图 
层 而 得 到 的 。 那 么 该 图 层 被 称 为 “背景 ”图 层 的 异 源 图 层 。 

口 灰色 图 层 ”如果 某 个 图 层 是 通过 添加 滤 镜 得 到 的 , 这 种 整个 图 层 只 有 一 种 颜色 值 
的 图 层 通常 称 为 灰色 图 层 。 最 典型 的 灰色 图 层 是 50% 中 性 灰 图 层 。 灰色 图 层 既 
可 以 由 同 源 图 层 生 成 ， 也 可 以 由 异 源 图 层 得 到 ， 因 此 ， 既 可 以 用 于 图 像 的 色彩 调 
整 ， 也 可 以 进行 特殊 的 图 像 拼 合 。 

除了 普通 的 图 层 登 加 模式 外 ，Photoshop 为 用 户 提供 了 27 种 图 像 的 混合 效果 ， 其 分 

为 6 个 大 类 。 


1. 组 合 模式 组 


组 合 模式 主要 包括 “正常 ”和 “溶解 ”选项 ，“ 正 常 ” 模 式 和 “溶解 ”模式 的 效果 
都 不 依赖 于 其 他 图 层 ， “溶解 ”模式 出 现 的 噪点 效果 是 它 本 身 形成 的 与 其 他 图 层 无 关 。 

(1) 正常 模式 

“正常 ”混合 模式 的 实质 是 用 混合 色 的 像素 完全 蔡 换 基 色 的 像素 ， 使 其 直接 成 为 结 
果 色 。 在 实际 应 用 中 ， 通 常 是 用 一 个 图 层 的 一 部 分 去 遮盖 其 下 面 的 图 层 。“ 正 常 ”模式 
也 是 每 个 图 层 的 默认 模式 ， 如 图 2-34 所 示 。 


基色 混合 色 结果 色 


入 图 2-34 ,正常 模式 


(2) 溶解 模式 

“溶解 ”混合 模式 的 作用 原理 ， 是 同 底层 的 原始 颜色 交替 以 创建 一 种 类 似 扩 散 抖动 
的 效果 ， 这 种 效果 是 随机 生成 的 。 混 合 的 效果 与 图 层 【 不 透明 度 】 选 项 有 很 大 关系 ， 通 
常 在 “溶解 ”模式 中 采用 颜色 或 图 像样 本 的 【不 透明 度 】 参 数值 越 低 ， 颜 色 或 图 像样 本 
同 原始 图 像 像 素 抖动 的 频率 就 越 高 ， 如 图 2-35 所 示 。 
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不 透明 度 为 80% 不 透明 度 为 50% 不 透明 度 为 20% 


和 图 2-35 溶解 模式 


2. 加 深 模式 组 


加 深 模 式 组 的 效果 是 使 图 像 变 暗 ， 两 张 图 像 大 加， 选择 图 像 中 最 黑 的 颜色 在 结果 色 
中 显示 。 在 该 模式 中 ， 主 要 包括 “ 变 暗 ”模式 、“ 正 片 符 底 ”模式 、“ 颜 色 加 深 ” 模 式 、 
“线性 加 深 ” 模 式 和 “ 深 色 ”模式 。 

(1) 变 暗 模 式 

“ 变 暗 ”混合 模式 是 通过 比较 上 下 层 像素 后 ， 取 相对 较 暗 的 像素 作为 输出 。 每 个 不 
同 颜 色 通 道 的 像素 都 会 独立 地 进行 比较 ， 色 彩 值 相对 较 小 的 作为 输出 结果 ， 下 层 表示 芝 
放 次 序 位 于 下 面 的 那个 图 层 ， 上 层 表 示 针 放 次 序 位 于 上 面 的 那个 图 层 ， 如 图 2-36 所 示 。 

(2) 正片 谷底 模式 

“正片 营 底 ”混合 模式 的 原理 是 ， 查 看 每 个 通道 中 的 颜色 信息 ， 并 将 基色 与 混合 色 
复合 ， 结 果 色 总 是 较 暗 的 颜色 。 任 何 颜色 与 白色 混合 保持 不 变 ， 当 用 黑色 或 白色 以 外 的 
颜色 绘画 时 ， 绘 画工 具 绘制 的 连续 描 边 产生 逐渐 变 暗 的 颜色 ， 如 图 2-37 所 示 。 
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和 图 2-37_ ,正片 到 底 模式 


“正片 受 底 ”模式 与 “ 变 暗 ”模式 不 同 的 是 ， 前 者 通常 在 加 深 图 像 时 颜色 过 渡 效 果 比 较 柔 和 ， 这 有 
利于 保留 原 有 的 轮 廊 和 阴影 。 


(3) 颜色 加 深 模式 
通过 查看 每 个 通道 中 的 颜色 信息 ， 并 通过 增加 对 比 度 使 基色 变 暗 以 反映 混合 色 ， 为 


“颜色 加 深 ” 混 合 模式 。 与 白色 混合 后 不 产生 变 
化 ，“ 颜 色 加 深 ” 模 式 对 当前 图 层 中 的 颜色 减 
小 亮度 值 , 这 样 就 可 以 产生 更 明显 的 颜色 变换 ， 
如 图 2-38 所 示 。 

(4) 线性 加 深 模式 

“线性 加 深 ? 混合 模式 能 够 查看 颜色 通道 信 
息 , 并 通过 减少 亮度 使 基色 变 暗 以 反映 混合 色 ， 
与 白色 混合 时 不 产生 变化 ， 如 图 2-39 所 示 。 

此 模式 对 当前 图 层 中 的 颜色 减 小 亮度 值 ， 
这 样 就 可 以 产生 更 明显 的 颜色 变换 。 它 与 “ 颜 
色 加 深 ” 模 式 不 同 的 是 ，“ 颜 色 加 深 ” 模 式 产 
生 鲜 艳 的 效果 ， 而 “线性 加 深 ” 模 式 产生 更 平 
组 的 效果 。 

(5) 深 色 模 式 

“ 深 色 ”混合 模式 的 原理 是 ， 查 看 红 、 绿 、 
蓝 通 道中 的 颜色 信息 ， 比 较 混 合 色 和 基色 的 所 
有 通道 值 的 总 和 , 并 显示 色 值 较 小 的 颜色 。“ 深 
色 ” 模 式 不 会 生成 第 三 种 颜色 ， 因 为 它 将 从 基 
色 和 混合 色 中 选择 最 小 的 通道 值 来 创建 结果 颜 
色 ， 如 图 2-40 所 示 。 


3. 减 淡 模 式 组 


减 淡 模式 与 加 深 模式 是 相反 的 。 使 用 减 淡 全 图 2-39 线性 加 深 模式 
模式 时 ， 黑色 完全 消失 ， 任何 比 黑色 亮 的 区 域 都 可 能 加 亮 下 面 的 图 像 。 该 类 型 的 模式 主要 包 
括 “ 变 亮 ”模式 、“ 滤 色 ” 模 式 、“ 颜 色 减 淡 ” 模式 、“ 线 性 减 淡 ” 模式 和 “ 浅 色 ” 模式 。 

(1) 变 亮 模式 

“ 变 亮 ”混合 模式 是 通过 查看 每 个 通道 中 的 颜色 信息 ， 并 选择 基色 或 混合 色 中 较 亮 
的 颜色 作为 结果 色 。 比 混合 色 暗 的 像素 被 替换 ， 比 混合 色 亮 的 像素 保持 不 变 ， 如 图 2-41 
所 示 。 
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(2) 滤 色 模式 

“ 滤 色 ”混合 模式 的 原理 是 ,查看 每 个 通道 
的 颜色 信息 ， 并 将 混合 色 与 基色 复合 ， 结 果 色 
总 是 较 亮 的 颜色 。 用 黑色 过 泪 时 颜色 保持 不 变 ; 
用 白色 过 滤 将 产生 白色 。 就 如 同 两 台 投影 机 打 
在 同一 个 屏幕 上， 这样 两 个 图 像 在 屏幕 上 重 基 
起 来 结果 得 到 一 个 更 亮 的 图 像 ,如 图 2-42 所 示 。 

(3) 颜色 减 淡 模式 

“颜色 减 淡 ” 泥 合 模式 是 通过 查看 每 个 通道 
中 的 颜色 信息 ， 并 通过 增加 对 比 度 使 基色 变 亮 
以 反映 混合 色 ， 与 黑色 混合 则 不 发 生变 化 ， 如 ye 
图 2-43 所 示 。 Oa, 

(4) 线性 减 淡 模式 

“线性 减 淡 ” 混 合 模式 的 工作 原理 是 ， 查 看 每 个 通道 的 颜色 信息 ， 并 通过 增加 亮度 
使 基色 变 亮 以 反映 混合 色 。 同 时 ， 与 黑色 混合 不 发 生变 化 ， 如 图 2-44 所 示 。 


入 图 2-44 线性 减 淡 模式 


(5) 浅 色 模 式 

选择 “ 浅 色 ”混合 模式 以 后 ， 分 别 检测 红 、 绿 、 蓝 通道 中 的 颜色 信息 ， 比 较 并 求 出 
混合 色 和 基色 的 所 有 通道 值 的 总 和 并 显示 值 较 大 的 颜色 。“ 浅 色 ” 不 会 生成 第 三 种 颜色 ， 
因为 它 将 从 基色 和 混合 色 中 选择 最 大 的 通道 值 来 创建 结果 颜色 ， 如 图 2-45 所 示 。 


4. 对 比 模式 组 


对 比 模式 组 综合 了 加 深 和 减 淡 模式 的 特 
点 ， 在 进行 混合 时 ，50% 的 灰色 会 完全 消失 ， 
任何 高 于 50% 灰 色 的 区 域 都 可 能 加 亮 下 面 的 图 
像 ， 而 低 于 50% 灰 色 的 区 域 都 可 能 使 底层 图 像 
变 瞳 ， 从 而 增加 图 像 的 对 比 度 。 

该 类 型 模式 主要 包括 “ 释 加 ”模式 、“ 柔 
光 ” 模 式 、“ 强 光 ” 模 式 、“ 亮 光 ” 模 式 、“ 线 
性 光 ” 模 式 、“ 点 光 ” 模 式 和 “ 实 色 混合 ” 
模式 。 /了 图 2-45 . 浅 色 模式 

(1) 径 加 模式 

“ 闭 加 ”混合 模式 是 对 颜色 进行 正片 共 底 或 过 滤 ， 具 体 取决 于 基色 。 图 案 或 颜色 在 
现 有 像素 上 县 加 ， 同 时 保留 基色 的 明暗 对 比 。 不 替换 基色 ， 但 基色 与 混合 色 互相 混合 以 
反映 颜色 的 亮度 或 暗 度 ， 如 图 2-46 所 示 。 

(2) 柔 光 模式 

“和 柔 光 ”混合 模式 会 产生 一 种 柔 光 照射 的 效果 ， 此 效果 与 发 散 的 聚光灯 照 在 图 像 上 
相似 。 如 果 “ 混 合 色 ” 颜 色 比 “基色 ”颜色 的 像素 更 大 一 些 ， 那 么 “结果 色 ” 将 更 亮 ; 
如 果 “ 混 合 色 ”颜色 比 “ 基 色 ” 颜 色 的 像素 更 小 一 些 ， 那 么 “结果 色 ” 颜 色 将 更 暗 ， 使 
图 像 的 亮度 反差 增 大 ， 如 图 2-47 所 示 。 


和 图 2-47_ ,采光 模式 


(3) 强 光 模式 
“ 强 光 ”混合 模式 的 作用 原理 是 ， 复 合 或 过 滤 颜 色 ， 具 体 取决 于 混合 色 。 此 效果 与 
耀眼 的 聚光灯 照 在 图 像 上 相似 ， 如 图 2-48 所 示 。 
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(4) 亮光 模式 
“亮光 ”混合 模式 是 通过 增加 或 减 小 对 
比 度 来 加 深 或 减 淡 颜 色 , 具体 取决 于 混合 色 。 
如 果 混 合 色 (光源 ) 比 50% 灰 色 亮 ， 则 通过 
减 小 对 比 度 使 图 像 变 亮 ; 如 果 混 合 色 比 50% 
灰色 暗 ， 则 通过 增加 对 比 度 使 图 像 变 暗 ， 如 
图 2-49 所 示 。 
【亮光 ] 模 式 是 县 加 模式 组 中 对 颜色 饱和 度 影响 
最 大 的 一 个 混合 模式 。 混 合 色 图 层 上 的 像素 色 阶 
越 接 近 高 光 和 瞳 调 , 反映 在 混合 后 的 图 像 上 的 对 
应 区 瑟 反 闫 就 越 类 浊 利用 由 兖 光芒 模式 的 特点 则 | 人 图 2-48 _, 强 光 模式 
用 户 可 以 给 图 像 的 特定 区 域 增加 非常 邦 丽 的 
颜色 。 


(5) 线性 光 模 式 

“线性 光 ” 混 合 模式 是 通过 减 小 或 增加 
亮度 来 加 深 或 减 淡 颜 色 ， 具体 取决 于 混合 
色 。 如 果 混 合 色 光源) 比 50% 灰 色 亮 ， 
则 通过 增加 亮度 使 图 像 变 亮 。 如 果 混 合 色 
比 50% 灰 色 暗 ， 则 通过 减 小 亮度 使 图 像 变 
上 暗 ， 如 图 2-50 所 示 。 

(6) 点 光 模 式 

“点 光 ” 混 合 模式 的 原理 是 , 根据 混合 
色 替 换 颜 色 ， 具 体 取 决 于 混合 色 。 如 果 混 
合 色 (光源 ) 比 50% 灰 色 亮 ， 则 替换 比 混 
合 色 暗 的 像素 ， 而 不 改变 比 混合 色 亮 的 像 
素 。 如 果 混 合 色 比 50% 灰 色 上 暗 ， 则 替换 比 
混合 色 亮 的 像素 ， 而 比 混合 色 暗 的 像素 保 
持 不 变 ， 如 图 2-51 所 示 。 

(7) 实 色 混 合 模式 

“ 实 色 混合 ”混合 模式 是 将 混合 颜色 的 
红色 、 绿 色 和 蓝 色 通道 值 添加 到 基色 的 
RGB 值 。 如 果 通 道 的 结果 总 和 大 于 或 等 于 
255， 则 值 为 255; 如 果 小 于 255， 则 值 为 
0。 因 此 ， 所 有 混合 像素 的 红色 、 绿 色 和 蓝 
色 通 道 值 要 么 是 0， 要 么 是 255。 这 会 将 
所 有 像素 更 改 为 原色 : 红色 、 绿 色 、 蓝 色 、 青 色 、 黄 色 、 洋 红 、 白 色 或 黑色 ， 如 图 2-52 
所 示 。 


”图 2-49 ,亮光 模式 


【了 图 2-50 ,线性 光 模 式 


上 了 图 2-51 点 光 模式 


-了 图 2-52_。 实 色 混合 模式 


“ 实 色 混合 ”模式 的 实质 ， 是 将 图 像 的 颜色 通道 由 灰色 图 像 转换 为 黑白 位 图 。 


5. 比较 模式 组 


比较 模式 组 主要 是 “ 差 值 ”模式 和 “排除 ” 
模式 。 这 两 种 模式 彼此 很 相似 ， 它 们 将 上 层 和 
下 面 的 图 像 进行 对 调 ， 寻 找 二 者 中 完全 相同 的 
区 域 。 使 相同 的 区 域 显 示 为 黑色 ， 而 所 有 不 相 
同 的 区 域 则 显示 为 灰 度 层次 或 彩色 。 

在 最 终结 果 中 ， 越 接近 于 黑色 的 不 相同 区 
域 ， 它 就 与 下 面 的 图 像 越 相似 。 在 这 些 模式 中 ， 
上 层 的 白色 会 使 下 面 图 像 上 显示 的 内 容 反 相 ， 
而 上 层 中 的 黑色 则 不 会 改变 下 面 的 图 像 。 

(1) 差 值 模式 

“ 差 值 ”混合 模式 是 通过 查看 每 个 通道 中 的 
颜色 信息 ， 并 从 基色 中 减 去 混合 色 ， 或 从 混合 
色 中 减 去 基色 ， 具 体 取决 于 哪 一 个 颜色 的 亮度 
值 更 大 。 与 白色 混合 将 反 转 基色 值 ;， 与 黑色 混 
合 则 不 产生 变化 ， 如 图 2-53 所 示 。 

(2) 排除 模式 

“排除 ”混合 模式 主要 用 于 创建 一 种 与 【 差 
值 】 模 式 相 似 ， 但 对 比 度 更 低 的 效果 。 与 白色 
混合 将 反 转 基色 值 ; 与 黑色 混合 则 不 发 生变 化 。 

这 种 模式 通常 使 用 频率 不 是 很 高 ， 不 过 通 
过 该 模式 能 够 得 到 梦幻 般 的 怀旧 效果 。 这 种 模 
式 产 生 一 种 比 【 差 值 】 模 式 更 柔和 、 更 明亮 的 
效果 ， 如 图 2-54 所 示 。 


了 图 2-54 排除 模式 


测 汪 半 司 手 沪 山 忆 站 


网 
页 
设 
计 
5S 
网 
站 
建 
设 
Q 
OO 
中 
文 
版 


新 


沿江 评 


(3) 减 去 模式 

“ 减 去 ”模式 是 通过 查看 每 个 通道 中 的 颜色 
信息 ,并 从 基色 中 减 去 混合 色 , 在 8 位 和 16 位 
图 像 中 ， 任 何 生成 的 负片 值 都 会 剪 切 为 零 ， 如 
图 2-55 所 示 。 

(4) 划分 模式 

“划分 ”模式 是 通过 查看 每 个 通道 中 的 颜 
色 信 息 ， 并 从 基色 中 分 割 混 合 色 ， 如 图 2-56 
所 示 。 


6. 色彩 模式 组 


色彩 模式 组 主要 包括 “色相 ”模式 、 
和 度 ” 模 式 、“ 颜 色 ” 模 式 和 “明度 ”模式 。 
这 些 模式 在 混合 时 ， 与 色相 、 饱 和 度 和 亮度 有 
密切 关系 。 将 上 面 图 层 中 的 种 或 两 种 特性 应 
用 到 下 面 的 图 像 中 ， 产 生 最 终 效果 。 

(1) 色相 模式 

“色相 ”混合 模式 原理 是 有 车 几 国友 Es 
和 饱和 度 以 及 混合 色 的 色相 创建 结果 色 ， 如 图 
2-57 所 示 。 

(2) 饱和 度 模式 

“饱和 度 ” 混 合 模式 是 用 基色 的 明 图 2-56 划分 模式 
相 ， 以 及 混合 色 的 饱和 度 创建 结果 色 。 绘 画 在 
无 饱和 度 〈 灰 色 ) 的 区 域 上 ， 使 用 此 模式 绘画 不 会 发 生 任何 变化 。 饱和 度 决 定 图 像 显示 
出 多 少 色彩 。 如 果 没 有 饱和 度 ， 就 不 会 存在 任何 颜色 ， 只 会 留 下 灰色 。 饱 和 度 越 高 ， 区 
域内 的 颜色 就 越 鲜 艳 。 当 所 有 对 象 都 饱和 时 ， 最 终 得 到 的 几乎 就 是 荧光 色 了 ， 如 图 2-58 
所 示 。 


2-55 _ 减 去 模式 


图 2-57 ,色相 模式 了 图 2-58 饱和 度 模式 


(3) 颜色 模式 

“颜色 ”混合 模式 是 用 基色 的 明亮 度 ， 以 
及 混合 色 的 色相 和 饱和 度 创建 结果 色 。 这 样 
可 以 保留 图 像 中 的 灰 阶 ， 并 且 对 于 给 单 色 图 
像 上 色 和 给 彩色 图 像 着 色 都 会 非常 有 用 ， 如 
图 2-59 所 示 。 

“颜色 ”模式 能 够 使 灰色 图 像 的 阴影 或 轮 
廓 透 过 着 色 的 颜色 显示 出 来 ， 产 生 某 种 色彩 
化 的 效果 。 这 样 可 以 保留 图 像 中 的 灰 阶 ， 并 
上 且 对 于 给 单 色 图 像 上 色 和 给 彩色 图 像 着 色 都 
会 非常 有 用 。 使 用 “颜色 ”模式 为 单 色 图 像 
着 色 ， 能 够 使 其 呈现 怀旧 感 ， 如 图 2-60 
所 示 。 

图 2-60 中 分 别 应 用 了 单 色 模式 、 灰 度 模 
式 和 彩色 模式 ， 以 为 图 像 呈 献 不 同 的 效果 。 

(4) 明度 模式 

“明度 ”混合 模式 是 用 基色 的 色相 和 饱和 
度 ， 以 及 混合 色 的 明亮 度 创建 结果 色 。 此 模 
式 创 建 与 “颜色 ”模式 相反 的 效果 。 这 种 模 
式 可 将 图 像 的 亮度 信息 应 用 到 下 面 图 像 中 的 
颜色 上 。 它 不 能 改变 颜色 ， 也 不 能 改变 颜色 
的 饱和 度 ， 而 只 以 能 改变 下 面 图 像 的 亮度 ， 
如 图 2-61 所 示 。 


Photoshop 提供 了 混合 选项 以 及 10 种 可 
供 选择 的 样式 ， 通 过 这 些 方式 可 以 为 图 像 添 
加 一 种 或 多 种 效果 。 这 些 方式 类 似 模板 一 样 ， 
可 以 重复 使 用 ， 也 可 以 像 操 作 图 层 一 样 对 其 
进行 调整 、 复 制 、 删 除 等 操作 。 

因此 ， 掌 握 图 层 样式 的 应 用 技巧 ， 将 会 
给 用 户 的 设计 创作 带 来 很 大 的 方便 和 灵活 
性 ， 也 可 以 大 大 提高 设计 创作 的 工作 效率 。 


1. 混合 选项 


混合 选项 也 是 图 层 样式 的 组 成 部 分 ， 通 
过 调整 它 里 面 的 选项 ， 可 以 将 独立 不 同 图 层 
混合 做 出 特定 效果 。 双 击 图 层 ， 打 开 【 图 层 


和 图 2-61 ,明度 模式 


种 效果 
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a 后 ， 显 示 的 是 【混合 选项 】 的 参数 设置 区 域 。 其 中 ，【 常 规 混合 】 选 项 组 包括 了 
混合 模式 】 和 【不 透明 度 】 两 项 ， 这 两 项 是 调节 图 层 最 常用 到 的 ， 也 是 最 基本 的 图 层 选 
页 ， 与 【图 层 】 面 板 中 的 选项 


二 

选择 除 “ 背 景 ” 图 层 以 外 的 
任意 图 层 ， 执 行 【图 层 】 【图 层 | agok RR ] 
样式 】| 【混合 选项 】 命 令 ， 打开 | 
【图 层 样式 】 对 话 框 ， 如 图 2-62 | Be Me, ey em | 转 
所 示 。 旧 关 口 本 有 部 站 果 浊 合 成 组 


st 


(1) 填充 不 透明 度 

在 【高 级 混合 】 选 项 组 中 ， 
【填充 不 透明 度 】 选 项 只 影响 图 层 
中 绘制 的 像素 或 形状 ， 对 图 层 样 
式 和 混合 模式 不 起 作用 。 使 用 [ 填 
充 不 透明 度 】 可 以 在 隐藏 图 像 的 
司 时 依然 显示 图 层 效果 ， 这 样 可 
创建 出 隐形 的 投影 或 透明 浮雕 “在 图 2-62 。[ 图 层 样式 】 对 话 框 
果 ， 如 图 2-63 所 示 。 
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填充 不 透明 度 100% 填充 不 透明 度 50% 填充 不 透明 度 10% 填充 不 透明 度 0% 


2-63 填充 不 透明 度 设 置 


(2) 通道 

【通道 】 选 项 用 于 在 混合 图 层 或 图 层 组 时 ， 将 混合 效果 限制 在 指定 的 通道 内 ， 未 被 
选择 的 通道 被 排除 在 混合 之 外 。 比 如 白色 的 饮 子 图 层 与 黑色 背景 图 层 的 混合 效果 ， 每 禁 
用 一 个 通道 ， 都 会 生成 其 颜色 的 相反 色调 ， 如 图 2-64 所 示 。 


Dl IR) Bes Cee | DAE DoD Pow 


启用 所 有 通道 禁用 红色 通道 禁用 绿色 通道 禁用 蓝 色 ii 


汉 
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2-64 通道 选项 设置 


(3) 挖 空 

【 挖 空 】 选 项 决定 了 目标 图 层 及 其 图 层 效果 是 如 何 穿 透 图 层 或 图 层 组 ， 以 显示 其 下 
面 图 层 的 。 在 【 挖 空 】 下 拉 列 表 中 包括 “无 ”、“ 浅 ”和 “ 深 ” 三 种 方式 ， 分 别 用 来 设 
置 当 前 层 挖 空 并 显示 下 面 层 内 容 的 方式 。 

(4) 混合 颜色 带 

Photoshop 中 混合 颜色 带 的 作用 与 通道 的 作用 相同 ,它们 都 是 通过 选取 图 像 的 像素 来 
达到 控制 图 像 显 示 或 隐藏 的 目的 。 所 不 同 的 是 ， 使 用 混合 颜色 带 ， 用 户 拖 动 哪个 滑 条 的 
滑 块 ， 实 际 上 就 是 对 滑 条 所 代表 图 层 的 某 个 通道 做 某 些 修 改 。 然 后 以 这 个 被 改变 的 通道 
为 蒙 版 ， 控 制图 层 的 不 透明 度 ， 以 此 进行 图 层 混 合 。 如 果 说 ， 图 层 混合 模式 是 从 纵向 上 
控制 图 层 与 下 面 图 层 的 混合 方式 ， 那 么 混合 颜色 带 就 是 从 横向 上 控制 图 层 相 互 影 响 的 
方式 。 


2. 阴影 与 光 样式 


利用 投影 和 内 阴影 样式 ， 可 以 制作 出 物体 逼真 的 阴影 效果 ， 并 且 还 可 以 对 阴影 的 颜 
色 、 大 小 及 清晰 度 进行 精确 的 控制 ， 从 而 使 物体 富有 空间 感 。 而 【外 发 光 】 和 【内 发 光 】 
是 两 个 模仿 发 光 效果 的 图 层 样式 ， 它 可 在 图 像 外 侧 或 内 侧 添加 单 色 或 渐变 发 光 效 果 。 

(1) 投影 样式 

为 图 像 添加 投影 样式 ， 可 在 


指定 角度 拓展 某 种 颜色 的 像素 扩 rr 
散 ， 能 够 使 图 像 具 有 层次 感 和 立 Mi 
体感 ， 使 之 凸显 于 背景 之 上 。 在 

【图 层 样式 】 对话 框 中 ,启用 【 投 a 


影 】 选 项 ， 可 以 在 图 层 内 容 的 后 
面 添加 阴影 ， 如 图 2-65 所 示 。 
该 选项 中 的 各 个 参数 的 作用 
如 下 。 
口 混合 模式 ”用 来 确定 图 
层 样式 与 下 一 图 层 的 混 
合 方式 , 可 以 包括 也 可 以 


不 包括 现 有 图 层 。 
D 不 透明 度 “投影 效果 的 人 图 2-65 .投影 样式 的 设置 
透明 度 设置 。 


口 角度 用 于 确定 效果 应 用 于 图 层 时 所 采用 的 光照 角度 。 

口 使 用 全 局 光 ”为 图 层 应 用 与 整个 设计 方案 文档 内 所 有 图 层 一 致 的 【角度 】 而 设置 ， 
在 选中 该 选项 之 后 ， 调 节 【 角 度 】 设 置 会 影响 整个 设计 方案 文档 内 所 有 图 层 的 投 
影 角度 。 

口 距离 ”投影 效果 与 图 层 内 元 素 之 间 的 偏 移 距离 , 其 偏 移 方 向 与 【角度 】〗 设 置 相关 。 

口 扩展 用 来 扩大 杂 边 边界 ， 可 以 得 到 较 厚重 的 效果 。 

口 大 小 ”指定 模糊 的 数量 或 暗 调 大 小 。 


口 等 高 线 ”投影 的 渐变 色 深 曲线 。 

口 消除 锯齿 用 于 混合 等 高 线 或 光泽 等 高 线 的 边缘 像素 , 主要 应 用 于 小 尺寸 且 具 有 
复杂 等 高 线 的 阴影 。 

口 杂 色 ”由 于 投影 效果 都 是 由 一 些 平滑 
的 渐变 构成 , 因此 在 有 些 场合 可 能 产生 
英 尔 条 纹 , 而 添加 杂 色 就 可 以 消除 这 种 
现象 。 它 的 作用 和 “ 杂 色 ” 滤 镜 相同 。 

口 图 层 控 空投 影 ” 这 是 和 图 层 填 充 选 项 
有 关系 的 一 个 选项 。 当 将 填充 不 透明 度 
设 为 0% 时 ， 启 用 该 选项 ， 图 层 内 容 下 
的 区 域 是 透明 的 ; 禁用 该 选项 , 图 层 内 
容 下 的 区 域 是 被 填充 的 。 

投影 样式 多 用 于 模拟 真实 物体 在 光照 下 形 


网 
加 
设 
闻 成 的 阴影 ， 在 一 些 模拟 实景 的 设计 方案 中 具有 
出 重要 的 作用 ， 如 图 2-66 所 示 。 《了 图 2-66。 模 拟 实物 的 投影 效果 
污 等 高 线 决定 了 光 效 的 材质 特性 , 光 效 人 = 
中 哪里 应 该 凹陷 , 哪里 应 该 凸 可 以 由 等 | ei = [CR 
友 高 线 来 控制 而 利用 图 层 样式 的 好 处 | Ar Oe J 全 全 所 (6) 
版 就 在 于 可 以 随意 控制 等 高 线 , 以 控制 | 
3 图 像 侧面 的 光线 变化 。 


(2) 内 阴影 样式 
【内 阴影 7 效果 用 于 紧 靠 图 层 = 
内 容 的 边缘 添加 阴影 ， 使 图 层 具 Ey re 


有 凹陷 外 观 ， 在 【图 层 样 式 】 对 
话 框 中 启用 【内 阴影 】 选 项 ， 然 
后 即 可 单 击 该 选项 ， 进 入 【内 阴 
影 】 设 置 ， 如 图 2-67 所 示 。 

【内 阴影 】 样 式 的 设置 与 【 投 
影 】 样 式 的 设置 的 自 定义 选项 项 目 基本 相同 ， 其 唯 

-区 别 在 于 ,【 投 影 】 样 式 主要 显示 于 图 像 的 外 侧 ， 

而 【内 阴影 】 样 式 则 主要 显示 于 图 像 的 内 侧 ， 如 图 
2-68 所 示 。 

(3) 外 发 光 样 式 

【外 发 光 】 样 式 就 是 让 图 像 的 边缘 外 部 均匀 扩 
散 逐 渐 减 淡 的 光 晕 ， 从 而 使 物体 与 周边 事物 具有 明 
显 的 分 隔 。 启 用 【图 层 样式 】 对 话 框 中 的 【外 发 光 】 
选项 ， 然 后 即 可 配置 【外 发 光 】 样 式 的 属性 ， 如 图 
2-69 所 示 。 人 J 图 2-68 内 阴影 效果 


和 图 2-67 ,内 阴影 样式 


在 设置 【外 发 光 】 时 ， 背 景 的 颜 
色 尽 量 选择 深 色 图 像 , 以 便于 显示 出 
设置 的 发 光 效果 。 【外 发 光 】 与 【 投 本 让 本 
影 ] 和 【内 阴影 ] 等 样式 的 区 别 在 于 ， | a E -ee 
【外 发 光 】 样 式 可 设置 渐变 色 的 发 光 : gmk E 
效果 ,以 揉 合 复杂 的 发 光 形 式 , 如 图 
2-70 所 示 。 

(4) 内 发 光 样 式 7 全 

【内 发 光 】 效 果 的 设置 与 【外 发 st | Pi 


MN: Ep |m |% 


光 】 设 置 相同 , 但 其 效果 的 应 用 方向 I 
相反 ， 主 要 用 于 发 光 目 标 物 体 的 内 EE 


部 , 其 通常 与 内 阴影 相 结合 , 构成 物 
体内 部 止 陷 或 凸 出 的 效果 , 其 具体 设 
置 方法 在 此 将 不 再 袭 述 , 仅 在 此 展示 2-69 外 发 光 样式 
内 发 光 的 效果 ， 如 图 2-71 所 示 。 
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”图 2-70 外 发 光 效果 图 2-71 内 发 光 效 果 


3.， 和 斜面 和 浮雕 样式 
一 


使 用 【斜面 和 浮雕】 样式 可 以 为 -= i 
图 像 和 文字 制作 出 真实 的 立体 效果 。 
通过 更 改 众多 选项 ， 可 以 控制 浮雕 样 可 
式 的 强 弱 、 大 小 、 明 暗 变化 等 效果 ， 
以 设置 出 不 同 效果 的 浮雕 样式 。 
目 户 可 以 先 在 【图 层 样式 】 对 话 
框 中 启用 【斜面 和 浮雕 】 选 项 ， 然 后 
即 可 单 击 该 选项 ， 进 行 设置 ， 如 图 
2-72 所 示 。 

【斜面 和 浮雕 】 的 基本 设置 中 
包含 5 种 内 置 样式 设置 ， 其 作用 如 下 2-72 斜面 和 浮雕 基本 设置 
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所 示 。 


”图 2-74_。 内 斜面 效果 了 图 2-75 ,浮雕 效果 


口 外 斜面 在 图 像 外 边缘 创建 儿 面 效果 ， 
如 图 2-73 所 示 。 ， 
口 内 斜面 在 图 像 内 边缘 上 创建 针 面 效 Wm jh 
果 ， 如 图 2-74 所 示 。 网 页 中 建设 
口 浮雕 效果 ”创建 使 图 像 相 对 于 下 层 图 本 
像 凸 出 的 效果 ， 如 图 2-75 所 示 。 全 [sa 
口 枕 状 浮雕 ”创建 使 图 像 边 缘 凹 陷 进 入 
下 层 图 层 效果 ， 如 图 2-76 所 示 。 人 了 图 2-73 外 全面 效果 


网 页 说 于 号 网 态 健 设 


LEDRE3E| 


口 描 边 浮雕 ”在 图 层 描 边 效果 的 边界 上 创建 浮雕 效果 (只 有 添加 了 描 边 样式 的 图 像 
才能 看 到 描 边 浮雕 效果 )， 如 图 2-77 所 示 。 


A 2-76_。 枕 状 浮雕 效果 2-77_。 描 边 浮雕 效果 
【斜面 和 】 样式 还 支持 三 种 【方法 】 设 置 ， 用 于 定义 斜面 和 浮雕 的 具体 实现 方 


式 ， 


包括 【 】、【 雕 刻 清晰 】、【【 襄 刻 柔 和 】 等 ， 如 下 所 示 。 

口 平滑 可 稍微 模糊 杂 边 的 边缘 ,用 于 所 有 类 型 的 杂 边 , 不 保留 大 尺寸 的 细节 特写 。 
【平滑 】 方 法 是 【斜面 和 浮雕 】〗 样 式 的 默认 效果 方法 ， 其 效果 在 之 前 已 展示 过 ， 
在 此 不 再 殉 述 。 

口 雕刻 清晰 ”主要 用 于 消除 锯齿 形状 (如 文字 ) 的 硬 边 杂 边 , 保留 细节 特写 的 能 
优 于 【平滑 】 选 项 。 以 【外 和 斜面 〗 的 样式 为 例 ， 其 效果 如 图 2-78 所 示 。 

口 雕刻 柔和 ”该 方法 没有 【雕刻 清晰 】 描 写 细节 的 能 力 精 确 ， 其 主要 应 用 于 较 大 范 
围 的 杂 边 ， 其 效果 如 图 2-79 所 示 。 


图 2-78_。 雕 刻 清 晰 方法 图 2-79 雕刻 柔和 方法 


除 【 样 式 】 和 【方法 】 等 设置 外 ，【 和 斜面 和 浮雕 】 样 式 的 其 他 设置 与 之 前 介绍 的 样 
式 设置 作用 大 体 类 似 ， 在 此 将 不 再 袭 述 


4. 其 他 图 层 样式 


除了 之 前 介绍 的 5 种 样式 外 , Photoshop 还 为 用 户 提供 了 【颜色 秋 加 】、【 渐 变 秋 加 】、 
【图 案 闪 加 】、【 描 边 】 等 样式 , 分 别 用 于 改变 图 像 元 素 的 内 部 的 材质 贴图 以 及 外 部 的 描 
边 笔触 等 。 
(1) 颜色 径 加 样式 
【颜色 释 加 】 是 一 个 既 简 单 又 
实用 的 样式 ， 其 作用 实际 上 相当 
于 在 不 改变 原 图 像 的 情况 下 为 图 
像 统 一 填充 指定 的 颜色 ， 通 过 透 
明度 的 设置 ， 来 决定 颜色 对 图 像 
内 容 的 覆盖 程度 。 在 【图 层 样式 】 
对 话 框 中 启用 【颜色 释 加 】 选 项 ， 
单 击 该 选项 即 可 ， 如 图 2-80 
所 示 。 

在 【颜色 县 加 】 样 式 的 设置 
中 ， 用 户 可 以 设置 每 加 的 【混合 fy 图 2_80 颜色 番 加 的 设置 
模式 】、【 颜 色 】 以 及 【不 透明 
度 】 等 属性 ， 单 击 【 确 定 】 按 钮 将 其 应 用 到 图 
层 中 ， 此 时 ， 指 定 的 该 颜色 将 覆盖 到 图 层 元 素 
上 ， 如 图 2-81 所 示 。 
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如 果 需 要 改变 妥 加 的 颜色 ， 可 以 单 击 【 混 合 模式 】 下 
拉 菜 单 右 侧 的 颜色 拾取 器 ， 然 后 在 弹出 的 对 话 框 中 设 
SACDRU 辐 而 必 下 | 和 四 。s， 声色 闫 加 的 效果 
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(2) 渐变 到 加 样式 

【渐变 短 加 】 样 式 与 【颜色 得 加 】 | 于 - | 
样式 的 使 用 方法 十 分 类 似 , 其 区 别 在 Tan 一 一 i 
于 , 【颜色 肘 加 】 所 填充 的 为 纯色 内 : 
容 ， 而 【渐变 大 加 】 填 充 的 是 根据 指 
定 的 色彩 流向 定义 的 渐变 色彩 。 在 
【图 层 样 式 】 对 话 框 中 启用 【渐变 者 
加 】 选 项 ， 然 后 即 可 单 击 该 选项 。 查 
看 [渐变 站 加 ] 的 属性 设置 , 如 图 2-82 
所 示 。 

在 【渐变 肘 加 】 样 式 的 设置 中 ， 
用 户 可 以 单 击 【渐变 】 的 取 色 器 ， 在 
弹出 的 【 浙 变 编辑 器 】 中 设置 渐变 的 
颜色 ， 如 图 2-83 所 示 。 

在 该 编辑 器 中 ， 用 户 可 以 选择 Photoshop 预 设 的 各 种 渐变 方案 ， 也 可 以 拖 电 和 修改 
下 方 渐变 编辑 框 中 的 各 种 调节 柄 ， 定 义 个 性 化 的 渐变 ， 再 单 击 【 确 定 】 将 其 应 用 到 图 层 
上 ， 如 图 2-84 所 示 。 


和 图 2-82 ,渐变 全 加 的 设置 


. 


民 | 
MA PI 


名 称 N); [双色 


新 类 型 : [ 实 底 “ 


和 图 2-83 ,渐变 编辑 器 设置 和 |_ 图 2-84 ,渐变 到 加 的 效果 


(3) 图 案 登 加 样式 

与 【颜色 有 登 加 】、【 渐 变 和 琶 加 】 类 似 ，【 图 案 琶 加 】 也 是 一 种 应 用 于 图 像 内 部 填充 
的 全 加 方式 ， 其 与 【颜色 又 加 】 和 【渐变 全 加 】 的 区 别 在 于 ， 其 允许 用 户 定义 各 种 纹理 
图 像 ， 将 纹理 图 像 全 加 到 图 案 上 。 在 【图 层 样 式 】 对 话 框 中 启用 【图 案 共 加 】 选 项， 并 
单 击 该 选项 ， 即 可 设置 【图 案 生 加】 的 属性 ， 如 图 2-85 所 示 。 

在 【图 案 琶 加 】 的 设置 中 ， 用 户 可 以 单 击 【图 案 】 的 下 拉 菜 单 ， 在 弹出 的 菜单 中 选 
择 纹理 图 案 ， 如 图 2-86 所 示 。 
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0 
[ 二 We ] [EX 人 | 


中 


点 了 图 2-85 ,图 案 登 加 的 设置 和 图 2-86 选择 图 案 纹理 第 
在 选择 了 图 案 纹理 之 后 ， 即 可 单 击 【 确 条 
定 】 按 钮 ， 将 纹理 应 用 到 图 层 上 ， 如 图 2-87 
所 示 。 时 
(4) 描 边 样式 三 -一 人 机 
【 描 边 3 样式 的 作用 是 在 不 修改 图 层 中 图 像 | I 素 
的 情况 下 ， 为 其 添加 一 个 纯色 、 浙 变色 或 图 案 


岂 与 图 层 柑 接 () 


的 外 边框 笔触 ， 在 【图 层 样式 】 对 话 框 中 启用 
【 描 边 】 选 项， 然后 即 可 单 击 【 描 边 】 选项， 设 
置 描 边 属性 ， 如 图 2-88 所 示 。 
在 设置 【 描 边 】 样 式 时 ， 用 
户 可 以 定义 描 边 的 【大 小 】 【位 
置 】、【 填 充 类 型 】 等 属性 ， 如 
下 所 示 。 
口 大 小 定义 【 描 边 】 的 边 
框 宽度 ， 单 位 为 像素 。 
口 位 置 定义 【 描 边 】 笔触 
相对 于 图 像 的 位 置 , 包括 
“外 部 ”"、“ 居 中 ”和 “内 | 
口 填充 类 型 定义 【 描 边 】 
笔触 的 填充 样式 , 包括 纯 
色 的 “颜色 ”、“ 渐 变 ” 和 
“图 案 ” 等 。 和 图 2-88_。 描 边 设置 
在 设置 【填充 类 型 ] 时 ,【 图 
层 样式 】 的 对 话 框 会 根据 具体 的 类 型 来 决定 如 何 设置 填充 样式 ， 如 选择 “颜色 ”， 将 显 
示 一 个 【颜色 拾取 器 】， 而 如 果 选 择 “ 渐 变 ”或 “图 案 ” 则 会 显示 对 应 的 渐变 设置 工具 
和 图 案 设置 工具 等 ， 其 具体 的 设置 在 此 将 不 再 袭 述 。 
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2.4 课堂 练 


按钮 是 网 页 界面 中 
其 可 以 捕获 用 户 的 鼠标 交互 , 实现 各 
种 网 页 行为 。 0 提供 了 图 层 
支 术 ，, 允许 用 户 将 多 个 图 像 以 层 的 方 
式 重 炙 形 成 一 个 整体 的 视觉 效果 。 同 
讨 , 还 提供 了 图 层 的 混合 模式 , 帮助 
有 户 快速 将 指定 的 处 理 效 果 应 用 到 
图 层 中 的 元 素 上 。 本 练习 就 将 使 用 这 


两 种 技术 , 制作 一 个 具有 立体 感 的 宝 

石 按钮 ， 如 图 2-89 所 示 。 

操作 步骤 : 

在 Photoshop 中 执行 【文件 ] 上 【新建 】 命 
在 弹出 的 【 新 建 ] 对 话 框 中 设置 【 宽度 】 

右 侧 的 【单位 】 为 “像素 "， 然 后 设置 【 宽 

度 ] 为 680，[ 高 度 ] 为 400，[ 分 辨 率 】 为 

72, 单 击 [ 确定 } 创建 设计 方案 , 如 图 2-90 

所 示 。 


各 和 (MD): | 未 标 时 -1 
预 设 (B): [ 扬 定 n | 取 交 ] 
dD: 站 | [ 存 伟 祝 有 (Sj..， 
离 度 Co0: 像素 删除 祯 设 (D) 
高 度 (H): [se <] 
分 状 竺 (B): 像 当 /英寸 3 


产 色 横 式 (M): [ RGB 前 色 :] [8 位 3 


背景 内 容 (C): [ 白色 Aj 
高 级 
颜色 配置 文件 (9}: [ 工作 中 的 RGB: sRce IE!=] 
像素 长 宽 比 (X): [ 方形 铺 素 可 


2-90 创建 设计 方案 


执行 【文件 ] |【 置 入 嵌入 的 智能 对 象 】 命 
令 ， 然 后 在 弹出 的 【 置 入 嵌入 对 象 ] 对 话 框 

中 从 本 书 配套 光盘 中 对 应 目录 下 选择 
“background.bmp” 素 材 文件 ， 将 其 置 入 
到 当前 设计 方案 , 并 按 下 回 车 键 确认 素材 置 
入 成 功 ， 如 图 2-91 所 示 。 

在 工具 箱 中 选择 【 椭圆 工具 】 图， 然后 在 
画布 上 单 击 鼠 标 ， 在 弹出 的 【 创建 椭圆 ] 对 


”图 2-89 ,立体 感 的 宝石 按钮 效果 


话 框 中 设置 【 宽度 ] 为 “180 像素 "、【 高 度 】 
“180 像素 "， 单 击 【 确定 】 绘制 椭圆， 
如 图 2-92 所 示 。 


2-91 和 置 入 素材 智能 对 象 


2-92 绘制 椭 区 


和 拓 量 图 形 通常 由 笔触 和 填充 组 成 ,笔触 是 失 量 
图 形 的 轮 廊 (也 被 称 作 “ 描 边 ” )， 填 充 则 是 封 
闭 轮 廊 内 部 的 色彩 。 新 安装 的 Photoshop 通常 
会 默认 为 第 一 次 绘制 的 失 量 图 形 添加 红色 
(#FEF0000 ) 填充 ， 并 采用 黑色 (#000000 ) 
笔触 。 


圆 在 [ 图 层 ] 面 板 中 保持 矢量 图 形 的 选择 状态 ， 
然后 在 【 工具 选项 栏 ] 中 单 击 【 设置 形状 填 
充 类 型 ] 按 馈 国 网 ， 在 弹出 的 选择 器 中 设置 
其 为 白色 ( #FFFFF )， 如 图 2-93 所 示 。 


图 2-93 ,设置 白色 【填充 】 


加 在 【工具 选项 栏 ] 中 单 击 【 描 边 】 的 【设置 
形状 描 边 类 型 ] 按钮 [一 ]， 在 弹出 的 选择 器 
中 选择 【无 颜色 】 按 钮 用 ， 如 图 2-94 所 


不 o 


2-94 ,清除 图 形 笔触 


回 在 【图 层 】 面板 中 选中 矢量 图 形 所 在 图 层 ， 
执行 【图 层 】1【 图 层 样式 】 |【 混合 选项 】 


命令 , 在 弹出 的 【图 层 样式 】 对 话 框 中 单 击 
左 侧 列表 框 内 的 【 斜面 和 浮雕 】 选项 ， 然 
后 设置 其 “斜面 和 浮雕 ”样式 ， 如 图 2-95 
所 示 。 


To Te I» 


E57 0 


2-95 设置 “和 斜面 和 浮雕 ”样式 
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在 【图 层 样式 】 对话 框 中 单 击 左 侧 【 样式 】 
列表 内 的 【等 高 线 ] 选项 ， 设 置 【 等 高 线 】 
为 “高 斯 "， 选 择 【 消除 锯齿 】 如 图 2-96 
所 示 。 


后 (V) 


2-96 设置 “等 高 线 ” 样 式 


图 用 同样 的 方式 单 击 左 侧 [ 样式 ) 列 表 内 的 [ 内 
发 光 ] 选 项 , 然后 再 设置 “内 发 光 ” 的 样式 ， 
如 图 2-97 所 示 。 

在 设置 “内 发 光 ” 样 式 时 ,需要 设置 其 内 发 光 


渐变 色 为 从 黑色 ( #000000 ) 到 和 白色 
(#EFFFFF ). 


网 
页 
设 
计 
5S 
网 
站 
建 
设 
Q 
oO 
中 
文 
版 
标 
准 
教 
程 


站 证 ] 本 江 RURT 


[了 图 2-97 ,设置 “内 发 光 ” 样 式 
图 单 击 左 侧 【 样式】 列表 内 的 【光泽 】 选 项 ， 
然后 设置 “光泽 ”的 样式 , 如 图 2-98 所 示 。 


单 击 左 侧 【 样式 】 列 表 中 的 【投影 】 
选项 , 然后 设置 “投影 的 样式 , 如 图 2-100 
所 示 。 


证 


EE 
EE TS 


sa] 


LI 图 2-100 ,设置 “投影 ”样式 


EE3 
加 
ET 
HD 


设置 “光泽 ”样式 


人 2 


“光泽 ”样式 的 “县 加 ”混合 模式 其 颜色 为 白 
色 (#EFFFFF ). 


单 击 左 侧 【 样式 ] 列表 内 的 【渐变 又 加 】 选 
项 ,然后 设置 “渐变 二 加 ”的 样式 ， 为 其 应 
用 渐变 效果 ， 渐 变 的 取 色 点 位 置 依 次 为 
“0%”、“23%”、“62%” 以 及 “100%”， 颜 
色 值 如 图 2-99 所 示 。 


| 


?= 


设置 “渐变 


' 图 2-99 叠加 ”样式 


在 【图 层 】 面板 中 的 【 属性 ] 工具 栏 中 设置 
矢量 图 层 的 【 填充 】 值 为 “0%”， 然 后 即 
可 完成 此 矢量 图 层 的 设置 ， 如 图 2-101 
所 示 。 


[了 图 2-101 


设置 【填充 】 属 性 


执行 【文件 】 |【 置 入 嵌入 的 智能 对 象 】 命 
令 ， 然 后 在 弹出 的 【 置 入 嵌入 对 象 】 对 话 框 
中 从 本 书 配套 光盘 中 对 应 目录 下 选择 
“cloud.psd” 素 材 文件 , 将 其 置 入 到 当前 设 
计 方 案 中 , 拖 披 至 之 前 绘制 的 圆 形 矢 量 图 形 
正中 央 位 置 ， 按 下 回 车 键 确认 置 入 ， 如 图 
2-102 所 示 。 
在 【图 层 】 面板 中 选择 之 前 绘制 的 圆 形 矢量 
图 形 ， 执 行 【 图 层 ] |【 图 层 样式 ] |【 拷贝 
图 层 样式 ] 命令 ， 然 后 再 选择 插入 的 云 形 图 


标 素材 所 在 图 层 ， 执 行 【 图 层 】 |【 图 层 样 【混合 选项 ] 命令 ， 在 弹出 的 【 图 层 样式 】 


式 】 |【 粘贴 图 层 样式 】 命令， 复制 图 层 效 对 话 框 中 设置 【 填充 不 透明 度 】 为 “0% ”， 
果 ， 如 图 2-103 所 示 。 如 图 2-105 所 示 。 


EE 


RAB 
癌 规 六 语 
| EE 
TR 一 ej% | [fw 
Pr MD 
生计 通明 芝 四 ;人 p 国 
通道: Vr Met Mom 


天 


了 图 2-102 ,插入 素材 文件 


图 2-105 设置 图 形 填充 不 透明 度 
提 ” 示 
在 此 处 设置 图 层 的 【填充 不 透明 度 〗 效果 与 


在 【图 层 】 面 板 的 【属性 】 工 具 栏 中 设置 【 填 
充 】 的 百分比 值 效 果 完 全 相同 。 
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单 击 左 侧 【 样式 】 列表 中 的 【 斜面 和 浮雕 】 
选项 ， 然 后 在 右 侧 设置 该 矢量 图 形 的 “斜面 
和 浮雕 ”样式 属性 ， 如 图 2-106 所 示 。 


2-103_。 复 制图 层 效果 


用 之 前 同样 的 方式 绘制 一 个 直径 为 “200 像 


素 ”、 填 充 为 白色 ( 是 FFFFF ) 的 无 笔触 贺 ws 一 过 
网 Ta ee 
形 矢量 图 形 , 将 其 圆心 与 之 前 绘制 的 矢量 贺 n es 了 Laas 


CEE 


形 图 形 对 齐 ， 用 作 宝 石 按钮 的 表层 ， 如 图 
2-104 所 示 。 


[三亚 十 蚂 ] [ 于 W 褒 


2-106 。“ 和 斜面 和 浮雕 ”样式 


2-104 ”绘制 表层 矢量 圆 形 提 
此 处 “ 儿 面 和 浮雕 ”样式 的 【高 光 模式 】 颜 色 
在 【图 层 】 面板 选中 刚 绘制 的 圆 形 形 状 所 在 为 白色 (#EFFFFF ),【 阴 影 模 式 】 磊 色 为 浅 蓝 
的 矢量 图 层 ， 执 行 【图 层 】1【 图 层 样式 】| 色 (#59FDF3 ). 


79 


单 击 左 侧 【 样式 ] 列表 中 的 【 等 高 线 ] 选项， 网 在 左 侧 【 样式 ] 列表 中 选择 【 颜色 丢 加 ] 选 


然后 在 右 侧 设置 该 矢量 图 形 的 “等 高 线 ” 样 项 ,设置 【 混合 模式 】 为 “ 滤 色 ”,【 颜色 】 
式 属性 ， 如 图 2-107 所 示 。 为 白色 ( #FFFFF ), 【 不 透明 度 ] 为 “13%”， 


如 图 2-109 所 示 。 


[EE 
[na ] 
[ER 


FE 
EE 


EE L200 
HV) 


Ei 


EE 


和 图 2-109 .设置 “颜色 个 加 ”样式 


贺 在 左 侧 【 样式 】 列表 中 选择 【 投影 】 选 
项 , 设置 【投影 】 的 样式 属性 ， 如 图 2-110 
所 示 。 


单 击 左 侧 【 样式 】 列表 中 的 【光泽 】 选 项 ， 


I Ey 
然后 设置 “光泽 样式 ”的 属性 ， 其 中 ,【 混 | 有 
合 模式 】 的 颜色 为 白色 ( #FFFFFF ),【 等 高 A S 村口 WO SY 
线 】 为 “ 锥 形 "， 如 图 2-108 所 示 。 : 人 男 | 


Ah 一 一 [一 t 


te) 


[mw 
于 | | RA | 


MY) 


2-110 设置 “投影 ”样式 


园 将 绘制 的 两 个 圆 形 矢量 图 形 以 及 导入 的 云 
图 标 所 在 的 三 个 图 层 内 容 拖 电 至 画布 正中 
和 图 2-108 ,设置 “光泽 ”样式 央 ， 即 可 完成 本 练习 。 


2.5 课 演 练习 : 设计 产品 Gallery 模块 


随 着 扁平 化 设计 风格 逐渐 流行 ， 以 及 HTML 5 技术 的 普及 ， 越 来 越 多 的 网 站 据 弃 了 
传统 的 Flash 内 容 展示 模块 ， 采 用 HTML 结合 JavaScript 技术 来 实现 图 文 内 容 的 展示 。 
本 练习 就 将 使 用 Photoshop 的 素材 导入 、 矢 量 图 形 绘制 等 功能 ， 设 计 一 个 产品 的 Gallery 


模块 ， 以 展示 三 种 软件 产品 ， 如 图 2-111 所 示 。 


洒 化 至 繁 


过 现代 Web 技 术 


在 线 试用 


图 2-111 产品 Gallery 模块 


操作 步骤 : 

贺 在 Photoshop 中 执行 [文件] |【 新 建 ] 命 
令 , 在 弹出 的 【 新 建 ] 对 话 框 中 设置 Gallery 
模块 的 尺寸 、 分 辨 率 以 及 背景 色 , 创建 设计 
方案 ， 如 图 2-112 所 示 。 


名 种 (N): [Galery ] 确定 
预 设 : [ 自 定 $ [了 
| 存 依 祯 及 (S).… 


[全 到 于 


颜色 模式 : | RGB 颜色 :| | 8 位 nD 


背景 内 容 : [ 其 它 . : 厢 图 像 大 小 : 
高 级 1.40M 
疾 名 配置 文 件 [ 工作 中 的 RGB: sR6B 1 


像素 长 亮 比 : [ 方形 银 素 = 


图 2-112 ,创建 设计 方案 


加 在 【图 层 】 面板 中 新 建 名 为 header 的 图 层 
将 其 置 于 默认 背景 图 层 上 方 ， 再 新 建 一 
图 层 ， 将 其 放置 到 header 图 层 组 内 。 在 
[ 具 箱 】 中 选择 【 矩形 选 框 工具 ] 国 , 在 
布 上 绘制 任意 尺寸 的 一 个 矩形 选区 。 然 
执行 【选择 ] |【 变换 选区 】 命 令 ， 在 
[ 具 选 项 栏 ] 中 设置 [ X ] 值 为 “490 像素 ”; 


> 让 


贺 | 


口 宗 


【Y ] 值 为 “2.5 像素 ";【 W ] 为 “980 像素 ”; 
【H ] 为 “5 像素 "， 如 图 2-113 所 示 。 


图 2-113 ”绘制 顶部 边框 


图 执行 【编辑 ]1[ 填充 ] 命令 ,在 弹出 的 【 填 
充 ] 对 话 框 中 设置 [ 颜色 为 湛蓝 ( #00758a ) 


色 , 单 击 【 确定 】 按钮 完成 选 
2-114 所 示 。 


区 编辑 ,如 


图 


2-114 绘制 顶部 边框 


第 
2 
章 
设 
计 
网 
页 
元 
素 


| 


在 【图 层 】 面板 新 建 名 为 controllers 的 图 层 对 应 目录 下 的 “Arrow.psd” 素 材 文件 ， 将 
组 ， 将 其 置 于 header 图 层 组 与 默认 背景 其 置 入 到 之 前 绘制 的 矢量 圆 角 和 珑 形 按钮 上 
层 之 间 ， 再 新 建 名 为 “left_controller” 的 图 方 ， 并 按 下 回 车 键 确认 置 入 。 如 图 2-118 
层 组 ,将 其 置 于 controllers 图 层 组 内 。 在 [ 工 所 示 。 


具 箱 】 中 选择 【 圆 角 和 矩形 工具 ] 国 , 单 击 
画布 任意 区 域 ， 在 弹出 的 【 创建 圆 角 和 矩形 】 
对 话 框 中 设置 圆 角 属性 ， 单 击 【 确定 】 绘制 


圆 角 矩形 ， 如 图 2-115 所 示 。 


2-117 设置 矢量 按钮 位 置 


图 2-115 _ 绘 制 左 侧 控制 按钮 背景 


图 在 【图 层 】 面板 双击 绘制 的 矢量 图 层 , 在 弹 
出 的 【 拾 色 器 ( 纯色 ) ] 对 话 框 下 方 【# 】( 颜 

色 代 码 ) 位 置 输入 “eeeeee”, 单 击 【 确定 】 

修改 矢量 图 层 颜色 ， 如 图 2-116 所 示 。 
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2-118 和 置 入 素材 文件 


请 在 【图 层 〗 面 板 中 将 置 入 的 智能 对 象 图 层 拖 
慢 至 之 前 “left_controller” 图 层 组 中 ， 并 放置 
到 之 前 绘制 的 失 量 圆 角 矩 形 按钮 背景 之 上 。 


图 执行 【编辑 】|【 自由 变换 】 命 令 ， 然 后 在 
【 工具 选项 栏 ] 中 设置 【[X ] 值 为 “20 像素 ”， 
‖ , 【Y ]】 值 为 “250 像素 ”， 按 下 回 车 键 确 认 修 
改 结果 ， 如 图 2-119 所 示 。 


ea 


口 只 有 Web 颜色 


2-116 设置 按钮 背景 颜色 


回 选择 该 矢量 图 层 , 执行 【 编辑】1【 自由 
变换 】 命令， 然后 在 【 工具 选项 栏 ] 中 设置 
【X 】 值 为 “20 像素 ",【 Y 】 值 为 “250 像素 ”， 

按 下 回 车 键 确认 修改 结果 ， 如 图 2-117 

所 示 。 

执行 【文件 ] !【 置 入 嵌入 的 智能 对 象 】 命 
令 , 在 弹出 的 对 话 框 中 选择 本 书 配套 光盘 中 2-119 ,修改 箭头 素材 位 置 


图 在 [图 层 ] 面板 双击 箭头 素材 所 在 的 矢量 图 
层 ， 执 行 【 图 层 ] |【 图 层 样式 ] |【 颜色 又 
加 】 命 令 ， 在 弹出 的 【 图 层 样式 】 对 话 框 
中 单 击 【 颜色 拾取 器 】 按 钮 国 国 ， 设 置 填 
充 颜 色 为 灰色 ( #666666 )， 如 图 2-120 
所 示 。 


加 
i 图 2-122 制作 右 侧 控制 按钮 
(0): 一 [7 


Ed) 


VE 在 controllers 图 层 组 内 新 建 一 个 名 为 
“bottom_controller” 的 图 层 组 ， 在 该 组 内 
再 创建 一 个 名 为 “controller1” 的 图 层 组 ， 
在 【工具 箱 】 中 选择 【 椭圆 工具 ] 图 , 在 
画布 中 单 击 鼠 标 ， 在 弹出 的 【 创建 椭圆 】 对 
话 框 中 设置 其 【 宽度 ] 为 “16 像素 "，[ 高 
度 ] 为 “16 像素 "， 如 图 2-123 所 示 。 


2-120 设置 “颜色 从 加 ”样式 
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四 在 【图 层 】 面板 中 选中 “left_controller” 图 
层 组 ,执行 【 图 层 】1【 复制 组 】 命令， 
弹出 的 【 复制 组 对话 框 中 设置 其 组 名 【为 】 
“right_controller”, 单 击 【 确定 】 复制 编组 ， 
如 图 2-121 所 示 。 


口 从 中 心 


证 


图 2-123 ”绘制 椭圆 


复制 : left_cortroller 


为 Wi: [raht_controler | 而 丙 - 


项 再 次 选择 【椭圆 工 具 】 图 ， 在 【 工具 选项 
栏 ] 中 设置 【填充 】 为 “无 ”,【 描 边 】 为 
色 ( #fffff ) “2 点 "， 如 图 2-124 所 示 。 


目标 
文 格 Dj:[ Galley 3 


名 称 (ND): 


2-121 复制 图 层 组 


国 选择 新 命名 的 “right_controller” 图 层 组 ， po 
执行 【编辑 ] |【 变换 】 |【 水 平 翻 转 】 命令， 
翻转 该 图 层 组 ， 然 后 再 执行 【 编辑 ] |【 自 =| 
由 变换 ] 命令 ,在 【 工具 选项 栏 ] 中 设置 其 9 


【X 】 值 为 “960 像素 "，【Y 】 值 为 “250 像 
素 "， 将 其 放置 到 画布 右 侧 居中 位 置 ， 如 图 
2-122 所 示 。 


2-124 绘制 底部 控制 按钮 图 形 
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用 同样 的 方式 再 绘制 两 个 按钮 图 形 , 分 别 将 性 ， 如 图 2-127 所 示 。 
其 放置 于 “controller2”、“controller3” 等 
层 组 中 , 然后 将 其 移动 到 画布 底部 居中 位 


置 ， 如 图 2-125 所 示 。 


fefefe 


2-127 _ 输 入 标题 文本 并 设置 “字符 ” 
样式 


2-125 绘制 底部 其 他 两 个 按钮 图 形 在 【段落 】 面板 中 设置 该 段 标题 文本 的 段落 
属性 , 定义 其 [ 左 缩 进 儿 [ 右 缩 进 ] 均 为 “10 


像素 "， 如 图 2-128 所 示 。 
“ 椭 贺 1”、“ 椭 贺 2” 和 “椭圆 3” 的 中 心 点 
水 平 坐标 依次 为 “460 像素 "、“490 像素 ”和 
“520 像素 ”"， 垂 直 坐 标 均 为 “475 像素 ” 


在 controller 图 层 组 下 建立 content 图 层 组 ， 
在 content 图 层 组 内 建立 item1 图 层 组 ,在 日 大 道 至 简 衍 (." 
【 工具 箱 】 中 选择 【 横 排 文字 工具 ] 国 , 在 下 
画布 中 绘制 一 个 宽 500 像素 、 高 70 像素 的 
文本 框 ， 如 图 2-126 所 示 。 
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图 2-128 ,设置 “段落 ”属性 


固 用 同样 的 方式 再 绘制 一 个 宽 500 像素 ， 高 
105 像素 的 文本 框 , 在 其 中 输入 产品 介绍 
本 ， 并 在 【字符 】 面 板 设置 其 属性 ， 如 图 
2-129 所 示 。 


2-126 _ 绘 制 横 排 文 本 框 


在 绘制 指定 尺寸 的 文本 框 时 ， 可 先 绘制 参考 
线 , 然后 依托 参考 线 的 对 齐 功 能 来 进行 文本 框 
的 绘制 。 此 文本 框 的 中 心 点 水 平 坐标 为 “310 
像素 ”， 垂直 坐标 为 “235 像素 "。 


在 文本 框 中 输入 标题 文本 “大 道 至 简 衍化 图 2-129 ,设置 产品 介绍 文本 的 “字符 ” 
至 繁 "， 然 后 在 【 字符 】 面 板 中 设置 内 容 属 属性 


co 
|: 


产品 介绍 文本 框 的 中 心 点 水 平 坐标 为 “310 像 
素 ”， 径 直 坐 标 为 “322.50 像素 "， 闫 色 与 标题 
文本 框 相同 。 


在 【段落 】 面板 中 设置 产品 介绍 文本 的 段落 
属性 ， 包 括 【 左 缩 进 ]【 右 缩 进 】 以 及 【 首 
行 缩 进 】 等， 如 图 2-130 所 示 。 


图 2-130 设置 产品 介绍 文本 的 “段落 ” 
属性 
再 创建 一 个 宽 “180 像素 "、 高 “50 像素 ” 


的 文本 框 ， 输 入 “在 线 试 用 ”的 按钮 文本 内 
容 , 在 【字符 】 面板 中 设置 其 “字符 ”属性 ， 
如 图 2-131 所 示 。 


pe EE 
I 
三 后 可 了 懈 
简 库 在 线 文档 管理 平 
成 本 为 企业 建立 在 线 的 
文件 的 上 传 、 
权限 判定 依据 来 所 高 企业 
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按钮 文本 框 的 中 心 点 水 平 坐标 为 “160 像素 ”， 
重 直 坐标 为 “405 像素 "， 顾 色 与 标题 文本 框 
相同 。 


输入 按钮 文本 并 设置 “字符 ” 
属性 


绘制 一 个 
笔触 颜色 、 尺 二 


角 半 径 为 5 像素 .笔触 为 1 像素 、 
与 位 置 和 按钮 文本 相同 , 填 
充 为 空 的 圆 角 矩形 ， 作 为 按钮 的 边框 和 背 


本 


2-132 


加 在 【工具 箱 】 中 选择 【矩形 工具 】， 单 击 画 
布 , 在 弹出 的 【 创建 矩形 】 对 话 框 中 设置 其 
【 宽度】 为 “500 像素 ” 
单 击 【 确定 】, 然后 在 【 工具 选项 栏 】 


像素 ”， 
中 设置 其 


除 笔触 ， 如 图 2-133 所 示 。 


PsEE: 


图 2-133 


在 绘制 完成 矩形 背景 之 后 , 还 需要 将 其 中 心 点 
水 平 坐标 设置 为 “310 像素 ”， 
为 3207 售 来 2 


【不 透明 度 】 


罗 执行 【文件 ] 1[ 置 入 嵌入 的 智能 对 象 】 命 
令 ， 从 本 书 配套 光盘 中 对 应 目录 下 导入 
“item1.bmp” 素 材 文件 ， 在 【 图 层 】 面 板 


将 其 移动 


方 , 设置 其 中 心 点 水 平 坐标 位 置 为 “490 像 
素 ”， 垂直 坐标 位 置 为 
键 确认 导入 操作 ， 如 图 2-134 所 示 。 


2-132 所 示 。 


EES 衍化 至 繁 


管理 平台 通过 现代 Web 技 术 和 数据 库 技术 , 可 
丰富 


绘制 按钮 边框 和 背景 


, 【高度 ] 为 “240 


【填充 】 为 黑色 ( #000000 )， 清 
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痪 度 [500 像素 ] 高 度 :[240 佛 素 | 
口 从 中 心 


绘制 背景 矩形 


垂直 坐标 设置 
并 在 【图 层 〗 面 板 中 设置 其 
为 “70%”。 


至 之 前 步骤 中 绘制 的 背景 矩形 下 


“250 像素 "， 按 回 车 
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2-134 ,导入 素材 


贺 用户 可 以 用 同样 的 方式 , 在 content 图 层 组 
内 建立 item2 图 层 组 和 item3 图 层 组 , 制作 
其 他 两 个 产品 切换 图 像 效果 ， 完 成 整个 案 
例 ， 如 图 2-135 所 示 。 


2-135 完成 的 其 他 两 个 轮换 图 像 效果 


考 


一 、 填 空 题 


1. Photoshop 是 一 种 提供 基本 图 形 绘制 以 及 

强大 的 图 像 处 理 功能 的 行业 软件 ， 其 不 仅 应 用 于 
领域 ， 在 5 

等 与 图 像 处 理 相关 的 行业 也 有 着 广 


泛 的 应 用 。 

2. Photoshop 提供 了 一 系列 矢量 图 形 绘制 了 
具 ， 帮 助 用 户 绘制 各 种 按钮 、 

导航 栏 、 图 像 占 位 符 等 网 

页 元 素 的 原型 。 

3 . Photoshop 可 以 将 由 Illustrator 和 
CorelDraw 导入 的 矢量 图 形 转换 为 或 
顶 格 化 为 后 再 进行 处 理 。 


4. 图 像 尺 寸 和 画布 尺寸 的 区 别 在 于 ， 更 改 

画布 尺寸 时 ， 设 计 方 案 文档 中 的 所 有 元 素 

， 而 更 改 图 像 尺 十 时 ， 所 有 设计 方案 
文档 中 的 元 素 都 会 


二 、 选 择 题 
1. Photoshop 在 网 页 界面 设计 中 的 功能 不 包 


括 以 下 哪 一 种 ? 
A. 绘制 界面 元 素 
B. 设计 界面 元 素 的 效果 
C. 处 理 界 面 结构 
D. 处 理 网 页 图 像 
.【 工 具 选 项 栏 】 的 作用 是 ? 
A. 完整 结合 标题 栏 和 菜单 栏 的 功能 ， 
提供 命令 组 合 
B. 根据 用 户 当前 选择 的 操作 工具 , 显示 
该 操作 工具 对 应 的 进 阶 操作 选项 
C. 提供 Photoshop 图 形 绘制 和 图 像 设 计 
所 必须 使 用 的 各 种 工具 按钮 
D. 显示 当前 Photoshop 正在 编辑 的 图 像 
预览 图 ， 以 及 对 该 图 像 的 编辑 效果 
3. 在 网 页 界面 设计 中 ， 推 荐 采用 哪 种 颜色 
模式 ? 
.RGB 颜色 
. LAB 颜色 
. CMYK 颜色 
灰 度 
4. 文档 预 设 的 作用 是 ? 


避 


NWP 


A. 在 新 建文 档 之 后 预 加 载 一 些 文档 元 
素 内容 

B. 将 预 设 的 参数 存储 起 来 备 未 来 新 建 
设计 方案 时 使 用 

C. 快速 复制 Photoshop 设计 方案 

D. 存储 Photoshop 的 参数 ， 待 重新 安装 
了 Photoshop 之 后 履 盖 配 置 

5. Photoshop 可 以 直接 打开 以 下 哪 种 文档 ? 


A. ICON 图 标 文档 


B. Swift 图 形 
C. PSB 大 型 设计 方案 


D. 文本 文档 
三 、 简 答题 


1. 简 述 Photoshop 界面 中 各 种 元 素 的 作用 。 

2. Photoshop 在 网 页 界面 设计 中 都 具有 哪些 
应 用 ? 

3. 为 何 要 配置 性 能 选项 ? 在 多 软件 协作 中 
应 如 何 分 配 Photoshop 实际 的 内 存 占用 ? 

4. 什么 是 标尺 ? 标尺 的 作用 是 什么 ? 

5. 置 入 素材 的 两 种 方式 都 是 什么 ? 其 作用 
有 何 区 别 ? 
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3.1 选取 图 像 内 容 


内 容 的 尺寸 、 对 局 部 内 容 进 行 变形 等 。 Photoshop 内 置 了 强大 的 选区 系列 工具 ， 人 允许 用 户 
选择 局 部 图 像 区 域 ， 对 其 进行 编辑 修改 。 


Photoshop 提供 了 两 种 重要 的 选 框 工具 ， 即 【矩形 选 框 工具 】 国 和 【椭圆 选 框 工具 】 
国 ， 分 别 月 LG A le 


.和 撼 形 选 框 工具 


【和 拢 形 选 框 工具 ] 国 国 可 以 选择 各 种 长 宽 比 的 上 
和 矩形、 正方 形 和 圆 角 矩形 的 区 域 ， 帮 助 用 户 对 


该 类 区 域 进行 编辑 操作 。 

在 【工具 箱 】 中 选择 【矩形 选 框 工具 ] 有 |， 吧 轩 Er = = 
然后 即 可 在 画布 上 拖 忠 鼠标 ， 进 行 区 域 的 选择 ， se Fr 
如 图 3-1 所 示 。 ea 


在 选择 【矩形 选 框 工具 】 国之 后 ， 用 户 可 
以 在 【工具 选项 栏 】 中 设置 【矩形 选 框 工具 】 用。 图 。 沟 择 矩形 区 域 
的 属性 ， 实 现 复合 框 选 ， 如 图 3-2 所 示 。 ee 


入 图 3-2_。 和 矩形 选 框 工具 的 工具 选项 


【和 矩形 选 框 工具 】 国 的 工具 选项 大 体 分 为 三 类 ， 即 框 选 方式 、 羽 化 半径 和 框 选 样 
式 等 。 

(1) 框 选 方式 

框 选 方式 决定 了 若干 选 框 区 域 之 间 重 合 的 方式 ， 其 包括 4 种 具体 的 方式 ， 如 表 3-1 
所 示 。 
S23 表 3-1 ,矩形 选 框 工具 的 框 选 方式 
按钮 框 选 方式 作用 


直接 绘制 新 的 选区 
添加 到 选区 求 两 个 选区 的 并 集 
与 选区 交叉 


从 已 有 选区 中 减 去 部 分 区 域 ， 获 得 新 的 局 部 选区 
求 两 个 选区 的 交集 


如 果 用 户 仅仅 需要 绘制 一 个 新 的 矩形 选区 ， 可 选择 【新 选区 】 国 进行 绘制 ， 如 果 用 
户 需要 对 已 有 的 选区 进行 修改 ， 则 可 选择 其 他 三 种 框 选 方式 。 
技 


如 果 表 布 上 已 存在 一 个 或 多 个 选区 ， 则 用 户 可 以 选择 【新 选区 】 国 校 钥 ,然后 按 住 Shift 功能 键 实现 
“添加 到 选区 ”的 绘制 功能 ， 也 可 以 按 住 Alt 功能 键 ， 实 现 “ 从 选区 减 去 ”的 功能 。 
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(2) 羽化 半径 
普通 的 【矩形 选 框 工 具 】 国 仅仅 能 够 绘制 矩形 或 正方 形 ， 如 果 用 户 需要 绘制 圆 角 和 撼 
形 ， 则 可 以 设置 【和 拢 形 选 框 工具 】 上 的 【羽化 】 属 性 ， 定 义 矩 形 4 角 的 羽化 半径 长 度 值 ， 
绘制 出 指定 羽化 半径 的 圆 角 矩形 。 
(3) 框 选 样式 
了 Photoshop 提供 了 三 种 框 选 样式 , 允许 用 户 绘 制 多 种 类 型 的 选区 , 或 根据 指定 的 值 来 
决定 选区 的 尺寸 ， 其 三 种 样式 如 下 所 示 。 
口 正常 ”以 用 户 鼠 标 拖 名 的 起 点 决定 选区 位 置 , 以 拖 奥 的 斜 线 距离 来 决定 选区 的 尺 
寸 和 形状 。 
口 固定 比例 定义 一 个 比值 ， 以 比值 来 决定 选区 的 长 宽 比 ， 然 后 以 筷 标 拖 慢 的 起 点 
决定 选区 位 置 ， 以 斜 线 距离 来 决定 选区 的 长 度 和 宽度 。 
口 固定 大 小 ”定义 两 个 具体 的 长 度 和 宽度 值 ， 以 鼠标 拖 慢 的 起 点 决定 选区 位 置 ， 以 
长 度 和 宽度 值 来 决定 选区 的 长 度 和 宽度 。 


| 

2. 椭圆 选 框 工具 

【椭圆 选 框 工具 】 国 可 以 选择 各 种 椭圆 形 或 圆 形 的 区 域 ， 帮 助 用 户 对 该 类 区 域 进行 
操作 。 在 【工具 箱 】 中 长 按 【 和 矩形 选 框 工具 】 国 ， 然 后 即 可 在 弹出 的 菜单 中 选择 【椭圆 
选 框 工具 】 国 ,将 【 柿 圆 选 框 工具 】 国 置 为 
默认 的 选 框 工具 ， 并 将 其 置 于 激活 状态 ， 绘 制 
椭圆 形 选区 ， 如 图 3-3 所 示 。 

在 启用 【椭圆 选 框 工具 】 国 之后， 用 户 同 
样 可 以 在 【工具 选项 栏 】 中 设置 其 工具 选项 ， 
但 需要 注意 的 是 ， 由 于 【椭圆 选 框 工具 】 国 森 
身 绘制 的 就 是 圆 形 ， 因 此 其 【羽化 】 工 具 选 项 
是 没有 实际 作用 的 。 


@--3:12 快速 选择 和 魔 棒 -、 


域 


和 图 3-3_, 绘 制 椭圆 区 


选 框 类 工具 仅 能 选择 指定 的 规则 图 形 区 域 ， 如 果 用 户 需要 选择 一 些 指定 颜色 或 颜色 
变化 范围 的 区 域 以 进行 编辑 操作 , 则 需要 使 用 到 【 魔 棒 工具 ] 国 和 【快速 选择 工具 ] 国 |。 


1. 魔 棒 工 具 


【 魔 棒 工具 】 国 是 根据 指定 的 颜色 范围 来 创建 选区 的 工具 ， 也 就 是 说 如 果 某 一 颜色 
区 域 或 颜色 变化 范围 的 区 域 是 什么 形状 ， 则 【 魔 棒 工具 】 国 就 会 创建 选择 该 区 域 的 形状 


选区 。 在 【工具 箱 】 中 选择 【 魔 棒 工 具 】 国 之 
后 ， 即 可 用 鼠标 单 击 画布 上 指定 颜色 的 区 域 ， 
实现 选取 ， 如 图 3-4 所 示 。 

与 之 前 介绍 的 几 种 选 框 工 具 类 似 ， 在 启用 
【 魔 棒 工 具 】 国 之 后 ，【 工 具 选 项 栏 】 也 会 显 
示 一 些 与 【 魔 棒 工 具 】 国 相关 的 选项 ， 如 图 
3-5 所 示 。 

【 魔 棱 工 具 】 国 的 工具 选项 主要 分 为 四 大 
类 ， 即 框 选 方式 、 取 样 方式 和 容 差 设置 以 及 选 
取 规 则 等 。 其 中 , 框 选 方式 与 【和 矩形 选 框 工具 】” 
国 和 【椭圆 选 框 工具 】 国 的 作用 相同 ， 其 他 
三 类 工具 选项 的 作用 如 下 。 


3-5_。 魔 棒 工 具 的 工具 选项 


(1) 取样 方式 
取样 方式 的 工具 选项 主要 用 于 设置 可 定义 【 魔 棒 工 具 】 国 的 【取样 大 小 】，【 魔 棒 
工具 】 国 在 选区 图 像 色彩 时 的 定位 点 ， 决 定 以 哪些 点 中 的 色彩 为 取样 基准 ， 其 可 定义 


个 单独 的 像素 点 ， 也 可 定义 边 长 为 3 像素 、5 像素 、11 像素 、31 像素 、51 像素 、101 像 
素 的 矩形 区 域 ， 以 该 区 域 中 的 颜色 来 作为 取样 基准 。 

(2) 容 差 设置 

容 差 设 置 主要 用 于 定义 颜色 范围 的 误差 值 , 取 值 范围 在 0 一 255 之 间 , 默认 的 容 差 数 
值 为 32。 输 入 的 数值 越 大 ， 则 选取 的 颜色 范围 越 广 ， 创 建 的 选区 就 越 大 ， 反 之 选区 范围 
越 小 。 

(3) 选取 规则 

【 魔 棒 工 具 】 国 支持 三 种 选取 规则 ， 即 平滑 转换 选取 、 连 续 选 取 以 及 多 图 层 选 取 等 ， 
其 通过 三 个 按钮 来 实现 ， 如 表 3-2 所 示 。 


223 表 3-2_， 魔 棒 工 具 的 选取 规则 


平滑 边缘 转换 在 选取 区 域 时 对 色 块 边缘 进行 平滑 处 理 
只 对 连续 像素 取样 i 忽视 不 连续 的 区 域 (即使 该 区 
在 选取 指定 色 域 时 忽略 图 层 的 限制 (在 默认 状态 F【 魔 棒 工 
具 ] 国 轩 仅 处 理 当前 选择 的 图 层 或 位 于 画布 中 最 上 方 的 图 层 ) 


从 复合 图 像 中 进行 颜色 取样 


【 魔 棒 工 具 】 国 是 Photoshop 中 最 重要 的 工具 之 一 , 在 一 些 需要 精确 选取 和 复制 指定 
图 像 区 域 的 抠 图 操作 中 ， 都 需要 灵活 地 使 用 【 魔 棒 工具 】 国 进行 操作 。 


2. 快速 选择 工具 
【快速 选择 工具 】 国 是 【 魔 棒 工 具 】 国 的 升级 版 ， 其 作用 是 利用 可 调整 的 圆 形 画 笔 
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笔尖 快速 建立 选区 ， 并 自动 查找 指定 色 域 的 边缘 来 对 选区 进行 修正 。 
在 【工具 箱 】 中 单 击 【 魔 棒 工 具 】 国 ， 在 弹出 的 菜单 中 选择 【快速 选择 工具 】 图 I， 
启用 该 工具 ， 然 后 即 可 在 画布 中 使 用 该 工具 进行 图 像 区 域 的 选择 ， 如 图 3-6 所 示 。 


he 


【快速 i - 具 】 国 的 特性 是 首先 根据 用 户 鼠 标 单 击 的 位 置 形 成 一 个 选择 区 域 ， 当 
用 户 多 次 单 击 画 布 中 不 同 的 区 域 时 ， 【快速 选择 工具 】 会 根据 这 些 区 域 之 间 的 色差 


分 隔 线 ， 了 -个 选区 。 当 单 击 的 区 域 足够 多 时 ， 这 些 选 区 就 会 根据 色 域 合并 为 一 个 大 
的 选区 ， 如 图 3-7 所 示 。 
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图 3-6_。 快 速 选 择 区 域 图 3-7_, 多 次 快速 选择 形成 的 选 


【快速 选择 工具 】 国 同样 也 在 【工具 选项 栏 】 中 提供 了 一 些 配 置 选项 ， 包 括 框 选 方 
式 、 画 笔 设置 和 选取 规则 三 项 ， 如 下 所 示 。 

(1) 框 选 方式 

【快速 选择 工具 】 国 的 框 选 方式 与 【 算 形 选 框 工具 】 国 类 似 ， 仅 图 标的 样式 有 所 不 
同 ， 如 表 3-3 所 示 。 
232 表 3-3_， 快 速 选择 工具 的 框 选 方式 
按钮 框 选 方 式 


[Ed 


直接 绘制 新 的 选区 
求 两 个 选区 的 并 集 
从 已 有 选区 中 减 去 部 分 区 域 ， 获 得 新 的 局 部 选区 


从 选区 减 去 
(2) 画笔 设置 
画笔 设置 的 作用 是 定义 【快速 选择 工具 】 加 的 笔触 以 及 笔 

触 之 间 的 关系 , 单 击 其 显示 图 标 世 时, 即 可 打开 【画笔 选取 器 】， 

如 图 3-8 所 示 。 
在 该 选取 器 中 ， 用 户 可 以 设置 笔触 的 【大 小 】、【 硬 度 】、 

【间距 】， 以 及 笔触 拓展 选区 的 【角度 】、 笔 触 的 【 圆 度 】 和 【 笔 

触 】 的 大 小 等 ， 提 高 【快速 选择 工具 】 国 的 适应 性 。 

(3) 选取 规则 
【快速 选择 工具 】 国 的 选取 规则 包括 两 项 ， 即 【从 复合 医 
像 中 进行 颜色 取样 】 圈 和 【自动 增强 选区 边缘 】 国 。 其中， 第 图 3-8 ,画笔 选取 器 


一 项 在 之 前 小 结 中 已 经 做 过 详细 介绍 ， 第 二 项 则 主要 用 于 为 选区 的 边缘 进行 更 加 精细 的 
处 理 ， 使 其 更 加 平滑 。 


3.2 ”操作 选区 
除了 通过 【和 矩形 选 框 工具 】 国 、【 杭 圆 选 框 工具 】 国 、【 魔 棱 工 具 】 国 和 【快速 


选择 工具 】 等 工具 以 外 ，Photoshop 还 提供 了 其 他 一 些 修改 区 域 选择 状态 的 方法 ,包括 全 
选 、 反 选 、 取 消 选择 、 编 辑 选区 等 功能 等 。 


全 选 和 反选 是 一 种 快速 根据 需求 变更 选区 状态 的 方法 。 其 中 ， 全 选 顾名思义 ， 就 是 第 
将 画布 中 所 有 的 区 域 都 置 于 选择 状态 ， 而 反选 电 
则 是 将 目前 被 选择 的 区 域 置 于 非 选择 状态 ， 并 | 
将 未 被 选择 的 区 域 置 于 选择 状态 。 只 
网 
1. 全 选 员 
在 Photoshop 中 ， 用 户 可 以 执行 【选择 】 | 昌 
【全 人选】 命令 ， 或 按 下 CtrltA 组 合 键 ， 来 将 画 
布 中 所 有 元 素 选中 ， 如 图 3-9 所 示 。 : | 


Alt+Ctrl+A 


2. 反选 

在 用 户 创建 选区 之 后 ， 可 以 执行 【选择 】 人 
|【 反 向 】 命 令 ， 或 按 下 CtrltShift+I 组 合 键 进 和 图 3-9 。 全 选 操作 
行 反 选 操 作 ， 如 图 3-10 所 示 。 


CultA 

carD 
Shiftt CtrltD 
Shi 


在 了 图 3-10 ,反选 操作 


技巧 


网 
页 
设 
计 
与 
网 
站 
建 
设 
Q 
党 
中 
文 
版 
标 
准 
教 
程 


如 果 用 户 需 要 清除 所 有 区 域 的 选择 状态 ， 则 可 以 执行 【选择 】|【 取 消 选择 】 命 令 ， 
或 按 下 Ctrl+D 组 合 键 ， 直 接 删除 选区 。 

在 删除 选区 之 后 ， 如 果 还 想 恢 复 选 区 ， 则 可 以 执行 【选择 】|【 重 新 选择 】 命 令 ， 或 
按 下 Ctrl+ShifttD 组 合 键 ， 重 新 建立 之 前 的 选区 。 


选区 是 一 种 复杂 的 Photoshop 工具 ， 在 创建 选区 之 后 ， 用 户 可 以 通过 多 种 方法 来 对 
选区 进行 编辑 修改 操作 ， 包 括 基本 的 变换 选区 ， 以 及 复杂 的 修改 选区 。 


1， 变 换 选 区 
变换 选区 功能 可 以 用 来 改变 选区 的 各 种 属性 ， 使 选区 符合 用 户 的 实际 需求 。 在 


Photoshop 中 执行 【选择 】|【 变 换 选 区 】 命 令 ， 
或 在 选区 内 右 击 ， 执 行 【 变 换 选 区 】 命 令 ， 即 [ 吕 
可 对 选区 进行 变换 操作 ， 如 图 3-11 所 示 。 Ne > 
在 执行 【变换 选区 】 命 令 之 后 ， 选 区 将 会 Dy 
呈现 出 9 个 调节 柄 ， 用 于 直接 对 选区 修改 。 这 
些 调节 柄 大 体 可 分 为 三 类 ， 即 角 调节 柄 、 边 调 
节 柄 、 中 心 调节 柄 。 
口 角 调 节 柄 ”位 于 选区 四 个 角 方 向 的 调 
节 柄 , 用 于 在 儿 角 方向 调整 选区 尺寸 或 
根据 选区 的 中 心 点 进行 旋转 。 当 用 户 将 


在 加 坝 模式 下 编 儿 (Q) 


载 入 选区 (O).. 
存 售 迁 区 (V).. 


新 奸 30 模型 (3) 


和 鼠标 移动 到 该 调节 柄 上 时 ,如 果 光 标 呈 


pn 《了 图 3-1 .变换 选区 
现 为 【左上 右 F】 "或 【右上 左下 ]v 


的 状态 , 则 表示 可 向 对 应 方向 调整 选区 尺寸 , 而 向 对 应 方向 略微 移动 , 呈献 出 【 左 
上 旋转 】 了 所、【 左 下 旋转 】 人 +、【 右 下 旋转 】4+ 了 和 【右上 旋转 】 人 等 状态 时 ， 则 表 
示 可 以 进行 旋转 选区 操作 。 

口 边 调节 柄 “位 于 选区 四 个 边 的 中 线 位 置 , 用 于 从 水 平方 向 或 生 直 方向 调整 选区 尺 

寸 。 当 用 户 将 饼 标 移动 到 该 调节 柄 上 时 ， 如 光标 呈现 为 【水 平 调节 】tw 或 【垂直 

调节 ]】 和 的 状态 ， 则 表示 可 以 进行 对 应 方向 的 调节 。 

口 中 心 调节 柄 ”默认 位 于 选区 的 几何 中 心 位 置 ， 用 于 更 改选 区 旋转 时 的 中 心 点 。 当 
用 户 将 鼠标 移动 到 该 调节 柄 上 时 ， 如 光标 呈现 为 【中 心 调节 】S; 状 态 ， 则 表示 可 
以 进行 拖 旬 调节 。 

除了 提供 几 个 调节 柄 外 ， 在 执行 了 【变换 选区 】 命 令 之 后 ，Photoshop 还 会 在 【工具 


选项 栏 】 中 提供 一 些 变换 选区 的 工具 选项 ， 如 图 3-12 所 示 。 


和 图 3-12 ,变换 选区 的 工具 选项 


变换 选区 的 工具 选项 主要 分 为 以 下 几 个 部 分 ， 如 表 3-4 所 示 。 
3 表 3-4 ,变换 选区 的 工具 选项 


选 项 和 作 用 
该 图 标 包含 9 个 点 ， 单 击 其 中 任意 一 个 点 即 可 修改 选区 的 中 心 
区 水 平 坐标 定义 选区 中 心 点 的 水 平 坐标 
Y 定义 选区 中 心 点 的 科 直 坐标 
W 定义 选区 的 宽度 ， 以 中 心 点 为 中 心 从 水 平方 向 扩展 或 压缩 
图 保持 长 宽 比 在 修改 选区 宽度 或 高 度 时 保持 现 有 选区 长 度 和 宽度 的 比例 
H 高 度 定义 选区 的 高 度 ， 以 中 心 点 为 中 心 从 垂直 方向 扩展 或 压缩 
图 旋转 定义 选区 根据 中 心 点 来 旋转 的 角度 
H 设置 水 平 斜 切 定义 选区 根据 中 心 点 进行 水 平 斜 切 变形 
V 定义 选区 根据 中 心 点 进行 竺 直 斜 切 变形 本 
ES 修改 选区 边缘 的 插值 方式 章 
图 将 当前 选区 变换 模式 切换 为 变形 模式 放 
图 取消 已 进行 的 所 有 变换 操作 ， 退 出 变换 选区 模式 三 
界 
在 实际 的 操作 中 ，【 变 换 选 区 】 功 能 可 以 快速 地 修改 选区 的 尺寸 和 旋转 角度 ， 帮 助 面 


用 户 更 加 灵活 地 操作 选区 。 
2. 修改 选区 


Photoshop 为 选区 提供 了 一 系列 的 修改 功能 , 帮助 用 户 更 加 便捷 地 操作 选区 , 使 选区 
符合 实际 内 容 绘制 的 需求 。 这 一 修改 选区 操 
作 主 要 包括 5 种 ， 即 边界 、 平 滑 、 扩 展 、 收 
缩 和 羽化 。 

(1) 选区 边界 

选区 边界 功能 的 作用 是 将 当前 选区 更 
改 为 指定 宽度 的 轮廓 选区 , 并 取消 当前 选区 
的 选择 状态 。 在 Photoshop 中 执行 【选择 】 
| 修改 】|【 边 界 】 命 令 ， 然 后 将 弹出 【 边 
界 选区 】 对 话 框 ,允许 用 户 输入 这 一 轮廓 选 
区 的 像素 宽度 ， 如 图 3-13 所 示 。 上 

(2) 平滑 选区 

使 用 【 魔 棒 工具 】 国 等 根据 图 像 的 色 ff 了 图 3-13 ,创建 轮廓 选区 
域 来 创建 的 选区 通常 会 呈现 较 多 锯齿 , 如 果 
直接 对 这 类 选区 进行 操作 , 很 可 能 绘制 的 图 形 或 处 理 的 结果 不 尽 如 人 意 。Photoshop 提供 
了 平滑 选区 工具 ， 可 以 帮助 用 户 将 选区 边缘 的 锯齿 处 理 为 平滑 的 曲线 ， 使 选区 边缘 更 加 
柔和 。 

在 创建 选区 后 ， 执 行 【 选 择 】| 【修改 】| 【平滑 】 命 令 ， 然 后 即 可 打开 【平滑 选区 】 
对 话 框 ， 该 对 话 框 提 供 了 【取样 半径 】 的 输入 项 ， 如 图 3-14 所 示 。 


在 设置 了 【取样 半径 】 之 后 ，Photoshop 
会 根据 这 一 平滑 值 来 对 选区 的 边缘 进行 平滑 处 
理 ，【 取 样 半径 】 的 值 越 大 ， 则 选区 的 边缘 越 
平滑 。 

(3) 扩展 选区 

扩展 选区 就 是 在 现 有 选区 的 基础 上 将 选 
的 边缘 向 外 扩展 指定 的 距离 ， 将 选区 的 面积 增 
大 。 在 创建 选区 之 后 ， 执 行 【 选 择 】| 【修改 】 
平滑】 命令 ， 然 后 即 可 打开 【扩展 选区 】 2 
对 话 框 ， 输 入 【扩展 量 】 的 像素 值 ， 如 图 3-15 [了 图 3-14 平滑 选区 的 操作 
所 示 。 
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3-15 ,扩展 选区 


(4) 收缩 选区 
收缩 选区 功能 与 扩展 选区 的 作用 正好 完全 相反 ， 其 作用 是 将 选区 的 边缘 向 选区 内 部 
收缩 指定 的 距离 长 度 ， 减 小 选区 的 面积 。 收 缩 选区 的 方式 与 扩展 选区 类 似 ， 在 创建 选区 
之 后 执行 【选择 】|【 修 改 】|【 收 缩 】 命 令 ， 如 图 3-16 所 示 。 


和 _ 图 3-16 ,收缩 选区 


(5) 羽化 选区 

在 之 前 的 小 节 中 ,介绍 过 使 用 【和 矩形 选 框 工具 】 国 绘制 圆 角 和 矩形 的 方法 ， 如 果 已 经 
绘制 了 成 型 的 矩形 或 其 他 多 边 形 ， 则 可 以 通过 羽化 选区 的 方式 ， 将 这 些 选 区 的 棱角 转换 
为 贺 角 。 除 了 将 棱角 转换 为 圆 角 外 ， 羽 化 功能 还 可 以 对 选区 的 轮廓 进行 运算 ， 形 成 更 加 
柔和 的 效果 。 

在 创建 选区 后 ， 执 行 【 选 择 】| 【修改 】|【 羽 化】 命令 ， 即 可 对 现 有 的 选区 进行 羽化 
操作 ， 如 图 3-17 所 示 。 


Sl 


《了 图 3-17 。 羽 化 选区 
3， 应 用 选区 


在 Photoshop 中 ， 选 区 是 网 页 界面 设计 最 常用 的 工具 之 一 。 在 绘制 了 选区 之 后 ， 用 
户 可 以 对 选区 内 的 图 层 内 容 进行 移动 、 删 除 、 变 形 、 填 充 、 描 边 等 操作 ， 人 快速 更 改 图 层 
内 容 。 

(1) 移动 选区 内 容 

移动 选区 内 容 可 以 将 选区 圈 选 的 图 层 内 容 快 速 移动 到 其 他 位 置 ， 更 改 图 层 的 内 容 。 
需要 注意 的 是 , 移动 选区 内 容 这 一 操作 对 矢量 图 层 和 智能 对 象 图 层 无 效 。 在 选择 选区 后 ， 
用 户 可 以 激活 【移动 工具 】 国 ， 然 后 用 鼠标 对 选区 内 容 进 行 拖 上 中， 如 图 3-18 所 示 。 


和 _ 图 3-18 ,移动 选区 内 容 
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(2) 删除 和 草 切 选区 内 容 
作为 一 种 标准 的 Photoshop 对 象 ， 选 区 也 支持 一 般 的 编辑 操作 ， 如 删除 、 剪 切 等 。 
通过 这 些 操作 同样 可 以 快速 改变 选区 选择 的 内 容 。 同 样 ， 删 除 和 剪 切 选区 内 容 操作 都 对 
矢量 图 层 和 智能 对 象 无 效 。 用 户 可 以 在 选择 区 域 之 后 ， 使 用 Ctrl+X 组 合 键 剪 切 选区 内 的 
内 容 ， 也 可 以 使 用 Delete 功能 键 快 速 删除 选区 内 的 内 容 。 
(3) 填充 选区 ne 
在 选择 了 某 个 区 域 之 后 ， 用 户 可 以 为 该 区 域 填充 指定 a se 二 
的 内 容 ， 如 纯色 、 图 案 等 ， 将 虚拟 的 选区 对 象 转换 为 实际 De 
的 图 像 内容 。 在 创建 选区 之 后 , 将 鼠标 光标 置 于 选区 上 方 ，| 5 
然后 右 击 鼠 标 ,执行 【填充 】 命令 ,然后 即 可 打开 【填充 】| 二 
对 话 框 ， 如 图 3-19 所 示 。 口 保留 放 明 区 所‘p) 
在 【填充 】 对 话 框 中 ， 用 户 可 以 设置 【内 容 】 和 【 泥 
合 】 两 大 类 选项 ， 其 分 别 用 于 定义 填充 的 内 容 类 型 和 混合 [J 图 3-p 选区 
模式 ， 如 表 3-5 所 示 。 舌 0 
3 表 3-5 填充 选区 的 操作 选项 
类 型 “选项 内 容 作 用 
前 景色 ”| 将 【工具 箱 】 中 的 前 景色 填充 到 选区 中 
将 【工具 箱 】 中 的 背景 色 填充 到 选区 中 
颜色 选择 一 个 纯色 填充 到 选区 中 
应 用 内 容 感知 技术 读 取 选 区 内 的 像素 ， 然 后 对 这 些 像素 进行 运算 ， 
将 结果 填充 到 选区 中 
图 案 使 用 指定 的 图 案 来 填充 选区 
调用 过 去 填充 的 方式 来 进行 填充 
为 选区 填充 50% 深 度 的 灰色 
白色 为 选区 填充 白色 内 容 
在 使 用 “图 案 ” 时 提供 填充 内 容 的 选项 
颜色 适应 在 使 用 “内 容 识别 ”时 增强 颜色 的 感应 能 力 
定义 填充 内 容 的 混合 模式 
混合 | ”不 透明 度 定义 填充 内 容 的 透明 度 
定义 是 否 保留 混合 模式 下 的 透明 区 域 


在 【填充 】 对 话 框 中 设置 各 种 填充 选项 之 后 ， 用 户 
即 可 单 击 【 确 定 】 按 钮 ， 将 填充 应 用 到 选区 上 。 在 实际 
的 网 页 界面 设计 中 ， 填 充 选区 功能 可 以 方便 地 将 选区 转 
换 为 实际 的 图 像 内 容 ， 其 多 用 于 绘制 网 页 界面 的 各 种 显 
示 元 素 ， 如 按钮 、 图 层 的 显示 区 域 等 。 DO WD aao Oak | 


(4) 描 边 选区 es 1 
描 边 选区 的 作用 是 为 选区 边缘 绘制 一 个 基于 像素 的 中 ig ho |% 
笔触 ， 将 选区 括 起 来 ， 并 取消 选区 的 选择 状态 。 在 创建 用 夺 独到 
选区 之 后 ， 用 户 可 以 将 鼠标 光标 置 于 选区 上 方 ， 右 击 鼠 
标 执行 【 描 边 】 命 令 ， 打 开 【 描 边 】 对 话 框 ， 如 图 3-20 了 图 3-20 。 描 边 设置 


癌 颜色 适应 (QO 


使 用 


位 


所 示 。 


在 【 描 边 】 对 话 框 中 ， 用 户 同样 可 以 设置 三 大 类 选项 ， 包 括 【 描 边 】、【 位 置 】 以 
及 【混合 】 等。 其 中 ， 【混合 】 类 设置 与 之 前 介绍 的 【填充 】 对 话 框 中 的 效果 类 似 ， 在 
此 将 不 作 袭 述 ，【 描 边 】 和 【位 置 】 类 的 设置 如 表 3-6 所 示 。 
2 表 3-6_， 描 边 选区 的 操作 选项 


:选区 轮廓 内 部 绘制 描 边 
选区 轮廓 内 外 两 侧 均匀 分 布 描 边 
:选区 轮廓 外 部 绘制 描 边 


在 【 描 边 】 对 话 框 中 设置 各 种 描 边 选项 之 后 ， 用 户 即 可 单 击 【确定 】 按 钮 ， 将 描 边 
应 用 到 选区 上 。 在 实际 的 网 页 界面 设计 中 ， 描 边 选区 功能 可 以 方便 地 为 选区 绘制 像素 轮 
廓 ， 其 多 用 于 绘制 网 页 界面 的 组 件 、 表 格 等 。 


文本 是 构成 网 页 的 重要 元 素 。 其 既 包 含 了 单个 的 字符 ， 也 包含 了 由 这 些 单个 字符 组 
成 的 段落 。Photoshop 作为 一 种 网 页 界面 设计 工具 ， 结 合 操作 系统 自 带 的 字体 ， 具 备 强大 
的 文字 处 理 能 力 ， 可 以 为 网 页 设计 方案 应 用 各 种 风格 的 文本 内 容 。 


Photoshop 提供 了 两 种 主要 的 工具 以 处 理 文本 内 容 ， 即 【 横 排 文字 工具 】 国 和 【 坚 
排 文字 工具 】 国 ， 这 两 种 工具 可 以 在 Photoshop 中 创建 一 个 用 于 存储 和 显示 矢量 文字 的 
文本 图 层 ， 允 许 用 户 在 该 图 层 中 输入 和 修改 文本 内 容 。 


1. 横 排 文字 工具 


在 【工具 箱 】 中 单 击 【 横 排 文 字 工 具 】 辆 
按钮 ， 即 可 激活 该 工具 ， 并 在 画布 上 单 击 鼠 
标 ， 输 入 文本 内 容 ， 创 建文 本 图 层 ， 如 图 3-21 
所 示 。 

【 横 排 文字 工具 甘 时 可 以 直接 创建 基于 水 平 
方向 流动 的 文本 内 容 ， 并 将 其 置 于 与 文本 内 容 | 
一 致 名 称 的 文本 图 层 中 。 与 之 前 介绍 的 几 种 工 4 
具 类 似 ， 该 工具 也 在 【工具 选项 栏 】 中 提供 了 一 
几 种 设置 选项 ， 如 图 3-22 所 示 。 攻 了 图 3-21 ,创建 文本 图 层 
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和 图 3-22 _, 横 排 文 字 工 具 的 工具 选项 


【 横 排 文字 工具 】 国 的 工具 选项 主要 用 于 定义 字体 的 具体 显示 形式 ， 其 主要 包括 以 
下 几 种 功能 ， 如 表 3-7 所 示 。 


2 表 3-7__ 横 排 文 字 工 具 的 工具 选项 设置 


Ea 作 用 
切换 字体 的 排列 方向 
FE 选择 系统 中 已 安装 的 字体 ， 应 用 到 文本 图 层 上 
Light 使 用 细 体 模式 显示 字体 
Narrow 使 用 窄 体 模式 显示 字体 
网 Regular 使 用 标准 模式 显示 字体 
设 Em | ri | 使 用 斜体 模式 显示 字体 
此 Bold 使 用 粗 体 模式 显示 字体 
网 使 用 粗 斜 体 模式 显示 字体 
站 Black 使 用 黑体 模式 显示 字体 
设 末 加 像素 设置 字体 的 大 小 
司 无 以 默认 方式 显示 字体 
[| 售 | 以 增强 锐 化 《清除 锯齿 像素 ) 的 方式 优化 显示 字体 
文 犀利 以 普通 锐 化 《清除 锯齿 像素 ) 的 方式 优化 显示 字体 
版 [oa 玉林 | 以 印 化 (填充 像素 ) 的 方式 优化 显示 字体 
标 平滑 以 平滑 (进一步 填充 像素 ) 的 方式 优化 显示 字体 
根据 LCD 显示 器 的 特点 来 优化 显示 字体 
程 Windows 以 Windows 默认 方式 来 优化 显示 字体 
日 设置 文本 居 左 显示 
设置 文本 居中 显示 
设置 文本 居 右 显示 
[ 设置 文本 颜色 
图 创建 文字 变形 
国 切换 字符 和 段落 面板 
(1) 选择 字体 
字体 是 文字 具体 的 外 形 样式 ， 在 操作 系统 中 ， 通 常会 预 置 各 种 语言 的 字体 。 当 操作 
系统 安装 了 某 种 字体 之 后 ， 用 户 即 可 在 Photoshop 中 调用 这 种 字体 ， 将 字体 应 用 到 文 
汪汪 


在 【工具 选项 栏 】 中 ， 用 户 可 以 单 击 【 搜 索 和 选择 字体 】 国 I 下拉 表单， 在 
弹出 的 菜单 中 选择 字体 ， 然 后 将 这 些 字体 应 用 到 选择 的 文本 上 。 

(2) 设置 字体 模式 

字体 模式 是 对 字体 的 变化 和 改良 ,通常 情况 下 ,标准 的 字体 会 包含 7 种 模式 , 即 Light、 
Narrow、Regular、Italic、Bold、Bold Ttalic 以 及 Black 等 ， 分 别 定义 字体 的 细 体 、 窄 体 、 
标准 体 、 和 斜体 、 粗 体 、 粗 斜体 和 粗 黑体 等 。 用 户 在 使 用 这 些 模式 后 ， 即 可 将 这 种 变化 应 
到 字体 上 。 
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(3) 消除 字体 锯齿 


Photoshop 内 置 了 4 种 消除 锯齿 的 模式 ， 即 锐利 、 犀 利 、 浑 厚 和 平滑 等 ， 这 些 消除 锯 
齿 模式 可 以 增加 像素 点 或 减少 像素 点 的 方式 来 对 字体 显示 效果 进行 微调 。 除 此 之 外 ， 在 
高 版 本 的 Windows 系统 (6.0+) 上 ，Photoshop 还 可 以 调用 系统 的 Clear Type 技术 来 消 
除 锯齿 ， 即 使 用 Windows LCD 以 及 Windows 两 种 消除 锯齿 模式 来 进行 字体 优化 。 


技巧 


(4) 设置 字体 前 景色 

字体 的 前 景色 就 是 字体 默认 显示 的 颜色 。 用 户 
可 以 单 击 【 设 置 文本 颜色 ] 国王 按钮 ， 在 弹出 的 【 拾 
色 器 〈 文 本 颜色 ) 】 对 话 框 中 选取 颜色 ， 单 击 【 确 
定 】 按 钮 将 其 应 用 到 字体 上 ， 如 图 3-23 所 示 。 

(5) 设置 字体 变形 

字体 变形 是 Photoshop 提供 的 一 种 进 阶 字体 处 
理 方法 ， 其 作用 是 通过 矢量 曲线 的 运算 ,来 改变 字 
体 轮廓 的 线条 ， 从 而 实现 字体 的 扭曲 效果 。 在 【 工 
具 选 项 栏 】 中 单 击 【创建 文字 变形 】 辆 按钮 ， 即 可 
打开 【变形 文字 】 对 话 框 ， 如 图 3-24 所 示 。 

在 该 对 话 框 中 ， 用 户 可 以 单 击 【样式 】 的 下 拉 
菜单 ， 选 择 “扇形 ”、“ 下 弧 ”、“ 上 弧 ” 等 变形 
样式 ， 并 选择 变形 的 “水 平 ” 方向 或 “垂直 ”方向 
等 。 之 后 ， 即 可 设置 这 些 样式 的 【弯曲 】 度 、【 水 
平 扭曲 】 度 和 【垂直 扭曲 】 度 等 属性 。 

以 “扇形 ”样式 为 例 ， 在 选 定 该 样式 之 后 ， 可 
以 修改 其 默认 的 50%【 弯 曲 】 度 ， 也 可 以 为 其 增添 
新 的 【水 平 扭曲 】 度 或 【垂直 扭曲 】 度 ， 如 图 3-25 
所 示 。 

在 设置 了 字体 变形 的 样式 之 后 , 用 户 即 可 单 击 
【 确定】 按钮 ， 将 字体 的 变形 样式 应 用 到 文本 图 层 
中 ， 如 图 3-26 所 示 。 


2 坚 排 文本 工具 
在 默认 的 Photoshop 设置 中 ，【 工 具 箱 】 只 会 
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显示 【 横 排 文字 工具 ] 有 加 按钮 ， 吉 要 用 户 按 下 【 横 人 了 图 3-25_。 肩 形 ”样式 的 变形 设 村 
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文字 工具 】 国 按钮 ， 在 弹出 的 菜单 中 选择 【 竖 排 文字 工具 】 选 项 ， 然 后 即 可 激活 【 竖 
文字 工具 】 国 ， 如 图 3-27 所 示 。 


和 渤 入 


和 | 图 3-26 ,字体 变形 效果 图 3-27 ,激活 【 竖 排 文字 工具 】 


在 这 之 后 ， 用 户 可 以 直接 在 【工具 箱 】 中 单 击 【 竖 排 文 字 工 具 】 国 按钮 ， 使 用 该 工 
具 来 创建 基于 坚 排 的 文本 。 

【 竖 排 文字 工具 】 与 【 横 排 文字 工具 】 的 区 别 在 于 ，【 横 排 文字 工具 】 内 的 文本 流 以 
水 平方 向 自 左 向 右 流动 ， 而 【上 竖 排 文字 工具 】 内 的 文本 则 以 垂直 方向 自 上 而 下 流动 。 在 
实际 的 使 用 方面 ，【 竖 排 文 字 工具 】 与 【 横 排 文字 工具 】 大 体 类 似 ， 在 此 将 不 再 獒 述 。 


他 - 夫 克 只 处 理 字符 光 | 


Photoshop 为 用 户 提供 了 强大 的 字符 处 理 功能 ， 允 许 用 
户 改 变 字符 的 字体 、 样 式 、 尺 寸 、 间距、 伸缩 和 颜色 等 一 系 
列 属性 ， 帮 助 用 户 建立 更 加 丰富 的 文本 内 容 。 以 上 这 些 功能 
都 依赖 Photoshop 内 置 的 【字符 】 面 板 实现 。 在 Photoshop 
中 ， 用户 可 以 执行 【窗口 I 【字符 】 命令, 将 【字符 】 面 板 
激活 并 将 其 置 于 显示 状态 ， 如 图 3-28 所 示 。 

【字符 】 面 板 为 用 户 提供 了 众多 的 字体 设置 功能 ， 通 过 和 所] 图 3-28 。[ 字 符 ] 面板 
这 些 功能 ， 用 户 可 以 方便 地 改变 字体 的 各 种 样式 ， 如 表 3-8 所 示 。 
3 表 3-8 。【 字 符 】 面 板 的 功能 


将 系统 中 已 安装 的 字体 应 用 到 文本 上 
设置 字体 样式 为 已 应 用 的 字体 修改 加 粗 、 倾 科 等 样式 
设置 字体 大 小 设置 字体 的 尺寸， 单位 可 以 是 像素 、 英 寸 等 
设 轩 行距 设置 文本 行 之 问 的 辣 下 
a 以 微调 的 方式 设置 两 字符 之 间 的 水 平 间距 
一 设置 所 于 字符 之 间 的 
图 字 距 调整 


直接 设置 字符 之 间 的 水 平 间距 


续 表 


= 
焉 


名 称 作用 
ee 以 百分比 的 方式 设置 字符 之 间 的 比例 间距 
堵 直 缩放 设 这 字符 寺 直 方向 的 依 放 比例 
水 平 缩放 设置 字符 水 平方 向 的 缩放 比例 
设置 基线 偏 移 设置 字符 与 基线 之 问 的 偏 移 尽 二 
设置 文本 颜色 设置 文本 前 景色 
以 像素 的 方式 计算 字符 的 轮廓 ， 实 现 加 粗 效果 
仿 斜 休 以 像素 的 方式 计算 字符 的 轮廓， 实现 倾斜 效 果 
ee 所有 个] 定式 下 (公有 二] 和 
强制 所 有 小 写 拉丁 字 和 以 14 尺 大 写 方式 显示 ( 仅 对 


小 型 大 写 


删除 线 


i 
标准 连 字 实现 连 字 书写 效果 


选项 ， 根 据 相 邻 字符 设置 是 否 进行 字符 


上 下 文 痊 代 字 强 的 手写 外 观 

自由 连 字 OpenType 字符 选项 ， 为 常规 连 笔 字符 提供 额外 的 连 笔 
效果 ， 应 用 附加 连 笔 字符 

花饰 字 OpenType 字符 选项 ， 以 拉丁 字 名 


连 字 书 写 效果 (通常 用 于 优化 起 始 字符 
OpenType 字符 选项 ， 以 正文 样式 来 优化 普通 字号 字体 
标题 蔡 代 字 OpenType 字符 选项 ， 以 标题 样式 来 优化 大 字号 字体 

二 OpenType 字符 选项 ， 用 于 为 数字 字符 后 添加 英文 序数 
将 数字 上 标 

分 数字 OpenType 字符 选项 ， 将 以 斜 线 分 隔 的 数字 转换 为 分 数 
对 所 选 字 符 进行 有 关 
连 字符 和 拼写 规则 的 


国 目 回国 图 | 加 | 和 | 上 自 回回 回 图 国 | 旧 加 图 六 回回 图 图 


定义 OpenType 字符 的 连 笔 字 语 法 规则 和 语言 设置 


定义 字符 的 消除 锯齿 规则 ， 前 “消除 字体 锯齿 ” 


设置 消除 锯齿 的 方法 | 逢 关 小 忆 中 的 内容 


需要 注意 的 是 ，【 标 准 连 字 】 国 、【 上下文 蔡 代 字 】 图 、【 白 由 连 字 ]】 图 、【 花 饰 
字 】 贺 、【 荐 代 样 式 】 国 、【 标 题 蔡 代 字 】 国 、【 序 数字 】 辆 和 【分 数字 ]】 国 等 8 种 字 
符 样式 设置 按钮 仅 在 用 户 所 选 字体 为 OpenType 类 型 字体 时 可 用 。 

关于 字符 的 处 理 ， 用 户 可 创建 一 个 文本 图 层 ， 输 入 文本 内 容 后 再 将 其 选中 ， 通 过 实 
际 的 【字符 】 面 板 设置 来 自行 体验 其 效果 。 


【标准 连 字 】 国 等 字符 样式 设置 通常 都 用 于 拉丁 字符 ， 同 时 ， 绝 大 多 数 中 文字 体 都 不 是 OpenType 
字体 ， 因 此 这 些 字符 样式 设置 对 中 文字 体 的 意义 十 分 有 限 。 
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-3333 处理 段 落 - 

段落 是 若干 字符 组 成 的 集合 ， 是 文本 的 一 种 基本 单位 。 
在 Photoshop 中 ， 为 用 户 提供 了 【段落 】 面 板 ， 用 于 帮助 用 
户 处 理 字 符 的 A 实现 文本 的 排版 功能 。 在 Photoshop 中 
执行 【窗口 1【 段 落 】 命 令 , 然后 即 可 将 该 面板 置 于 激活 状 
态 ， 其 显示 界面 如 图 3-29 所 示 。 

段落 面板 主要 承载 了 三 方面 的 功能 ， 即 段落 文本 的 对 
齐 、 缩 进 以 及 前 后 间距 等 ， 其 功能 如 表 3-9 所 示 。 
2 表 3-9 【段落 】 面 板 的 功能 

名 称 作 用 
左 对 齐 文本 定义 段落 文本 内 容 居 左 对 齐 
定义 段落 文本 内 容 居中 对 齐 
右 对 齐 文本 定义 段落 文本 内 容 居 右 对 齐 
定义 段落 文本 最 后 一 行内 容 居 左 对 齐 
最 后 一 行 居中 对 齐 | 定义 段落 文本 最 后 一 行内 容 居 中 对 齐 
定义 段落 文本 最 后 一 行内 容 居 右 对 齐 
-一 定义 段落 文本 内 容 两 端 对 齐 


定义 段落 文本 左 仙 的 缩 进 距离 


1 生生 离 


【段落 】 面 板 


也 
FF"]3 
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前 


定义 了 入 文 本 与 上 一 个 段 洁 文本 之 癌 的 问 了 
定义 段落 文本 与 下 一 个 段落 文本 之 问 的 间距 

定义 亚洲 语言 文本 的 换行 模式 ， 允 许 行 首尾 出 现任 意 字 符 
禁止 行 首 出 现 以 下 字符 


i 
禁止 行 尾 出 现 以 下 字符 
避 头 尾 se [ 
法 则 设 禁止 行 首 出 现 以 下 字符 
是 和 %CT、 .el 
EE 
JIS 严格 i 区 人 人 
? ] } 
禁止 行 尾 出 现 以 下 字符 
([{t&S (TITICTF (#5(@[{¥ 
段落 中 文本 的 间距 组 合 设置 。 从 右 侧 的 下 拉 列 表 中 可 以 选择 不 同 的 
BE 间距 组 合 设 轩 
连 字符 是 在 每 一 行 末端 断 开 的 单词 间 添 加 的 标记 。 在 将 文本 强制 对 
连 字 齐 时 ， 为 了 对 齐 的 需要 ， 会 将 某 一 行 末端 的 单词 断 开 至 下 一 行 。 多 
选 “ 段 落 ” 面 板 中 的 “ 连 字 ”选项 ， 便 可 以 在 断 开 的 单词 间 显 示 连 
字 标 记 
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其 中 ，【 避 头 避 尾 法 则 设置 】 仅 对 亚洲 相关 语言 字符 构成 的 文本 有 效 ， 通 常 应 用 于 
日 文 、 中 文 等 全 角 文 本 ; 【 连 字 】 设 置 则 仅 对 由 拉丁 字符 构成 的 文本 有 效 。 

使 用 【段落 】 面 板 ， 用 户 可 以 方便 地 定义 段落 文本 的 字符 排 布 以 及 段落 之 间 的 间距 
设置 ， 实 现 更 加 丰富 的 内 容 排版 。 


输出 Web 设计 方案 


Photoshop 在 网 页 界面 设计 中 主要 承担 设计 方案 的 原型 绘制 以 及 界面 效果 设计 功能 ， 
最 终 形 成 一 个 完整 的 网 页 界面 设计 方案 。 

通常 情况 下 ， 由 Photoshop 制作 的 设计 方案 以 Photoshop 特有 的 PSD 格式 存储 。 如 
果 用 户 需 要 将 其 应 用 到 网 页 中 ， 就 必须 使 用 Photoshop 的 输出 设计 方案 功能 ， 将 其 存储 
为 Web 所 用 格式 。 

当 且 仅 当 Photoshop 的 网 页 界面 设计 方案 被 输出 为 图 像素 材 和 对 应 的 代码 之 后 ， 该 
界面 设计 方案 才能 被 应 用 到 网 页 开发 中 。 


图 像 切 片 是 一 种 应 用 于 网 页 界面 设计 的 特殊 技术 ， 该 技术 由 Macromedia 公司 制作 
的 网 页 界面 设计 软件 Fireworks 最 早 实 现 ， 原 理 是 根据 用 户 定义 的 尺寸 将 整个 网 页 设计 
方案 裁 切 为 矩形 块 ， 分 别 将 矩形 块 所 覆盖 的 区 域 输出 为 独立 的 图 像 。 

Adobe 公司 最 初 通过 一 个 名 为 ImageReady 的 工具 软件 向 用 户 提供 类 似 的 功能 , 以 处 
理 Photoshop 格式 的 Web 设计 方案 。 在 之 后 更 新 的 版 本 中 ，Adobe 逐步 将 ImageReady 
功能 集成 到 了 Photoshop 中 ， 使 Photoshop 获得 了 增强 的 Web 图 像 处 理 能 力 。 

切片 技术 的 出 现 极 大 地 提高 了 网 页 界面 设计 与 输出 资源 的 效率 ， 使 得 界面 设计 师 可 
以 更 方便 地 将 网 页 界面 效果 图 中 的 图 像 输出 为 网 页 程序 中 所 使 用 的 素材 。 应 用 了 切片 技 
术 的 Photoshop 也 在 之 后 的 数 年 中 逐步 取代 了 Fireworks， 成 为 网 页 界面 设计 最 重要 的 设 
计 工 具 。 


1. 切片 的 分 类 


了 Photoshop 的 切片 根据 其 作用 和 生成 的 机 理 ， 可 以 划分 为 三 种 形式 ， 即 默认 切片 、 用 
户 切片 和 图 层 切片 等 。 

(1) 默认 切片 

默认 切片 是 指 由 Photoshop 根据 当前 设计 方案 的 切片 位 置 自动 创建 的 切片 (这 类 切 
片 在 默认 情况 下 不 会 被 裁 切 并 输出 到 Web 文档 中 ， 在 Photoshop 中 边框 和 标签 被 显示 为 
灰色 ) 。 

默认 切片 在 Photoshop 中 被 显示 为 默认 切片 标记 国 (灰色 的 一 般 切 片 标记 ) ， 其 固 
定 存在 于 指定 位 置 ， 被 用 于 作为 其 他 类 型 切片 的 分 隔 区 域 ， 因 此 其 不 能 被 修改 尺寸 ， 也 
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不 能 被 修改 位 置 。 默 认 切 片 可 以 被 方便 地 转换 为 用 户 切片 。 

(2) 用 户 切片 

用 户 切片 是 指 用 户 手 工 绘制 或 从 默认 切片 中 手工 提取 而 成 的 切片 (这 类 切片 可 被 输 
出 到 Web 文档 中 ， 在 Photoshop 中 边框 和 标签 被 显示 为 蓝 色 ) 。 

用 户 切 片 在 Photoshop 中 被 显示 为 用 户 切片 标记 上 国 ( 蓝 色 的 一 般 切 片 标记 ) ， 其 是 
自由 度 最 大 的 切片 , 本 身 可 以 由 用 户 手 工 绘制 , 也 可 以 由 默认 切片 或 图 层 切 片 转换 而 来 。 
用 户 可 以 通过 可 视 化 的 操作 方式 来 拖 忠 修改 用 户 切 片 的 尺寸 和 位 置 。 

(3) 图 层 切 片 

图 层 切片 是 由 图 层 创 建 的 切片 ， 其 显示 效果 与 用 户 切 片 类 似 ， 都 允许 被 选择 ， 但 是 
不 允许 被 直接 修改 尺寸 和 位 置 ， 在 实际 输出 中 ， 图 层 切 片 和 用 户 切片 一 样 可 以 被 输出 为 
网 页 代码 ， 也 能 够 将 设计 方案 中 指定 区 域 的 内 容 作 为 资源 输出 。 

图 层 切 片 在 Photoshop 中 被 显示 为 图 层 切片 标记 国 ( 蓝 色 的 图 层 切 片 标记 )， 与 之 
前 两 种 切片 有 很 大 的 区 别 的 是 ， 图 层 切片 本 身 与 图 层 呈 现 一 种 绑 定 的 关系 ， 在 默认 状态 
下 ,Photoshop 不 允许 用 户 直接 修改 图 层 切 片 的 位 置 与 尺寸 。 只 有 当 图 层 的 尺寸 或 位 置 发 
生 更 改 时 ， 该 图 层 对 应 的 图 层 切片 才 会 随 之 更 改 。 


2. 切片 的 处 理 


通常 情况 下 , Photoshop 会 为 整个 文档 定义 为 一 个 默认 切片 。 当 用 户 创建 局 部 的 用 户 
切片 或 图 层 切 片 后 , Photoshop 会 自动 依照 该 用 户 切片 的 尺寸 和 位 置 , 在 生成 用 户 切片 的 
同时 将 文档 其 他 位 置 裁 切 为 多 个 局 部 默认 切片 ， 填 充 用 户 切 片 周围 的 缝隙 。 

随 着 用 户 创建 的 局 部 用 户 切片 越 来 越 多 , Photoshop 自动 创建 的 默认 切片 也 会 逐渐 增 
多 ， 直 至 用 户 切 片 之 间 所 有 空白 区 域 都 被 用 户 创建 为 用 户 切片 。 

Photoshop 提供 了 两 种 工具 来 处 理 图 像 切片 , 即 【 切 片 工具 ] 国 和 【切片 选择 工具 ] 国 |。 


3. 创建 切片 


Photoshop 会 自动 根据 用 户 切 片 和 图 层 切 片 的 矩形 尺寸 和 位 置 生成 默认 切片 ,填充 用 
户 切 片 以 及 图 层 切 片 之 外 的 其 他 剩余 位 置 空间 。 通 常情 况 下 提供 了 两 种 方式 来 创建 用 户 
切片 ， 即 绘制 用 户 切 片 以 及 将 默认 切片 提升 为 用 户 切 片 。 另 外 ， 还 提供 了 直接 根据 图 层 
创建 图 层 切 片 的 方法 。 

(1) 绘制 用 户 切 片 
手工 绘制 用 户 切片 ， 需 要 使 用 到 Photoshop 的 【切片 工具 】 辆 . 在 【工具 箱 】 中 单 
击 【 裁 前 工具 】 国 ， 在 弹出 的 菜单 中 选择 【切片 工具 】 国 ， 然 后 即 可 在 工作 区 中 拖 忠 
鼠标 ， 绘 制图 像 切 片 ， 如 图 3-30 所 示 。 
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3-30 ,创建 和 绘制 切片 


Photoshop 会 按照 先 自 左 至 右 再 从 上 到 下 的 顺序 依次 为 所 有 默认 切片 和 用 户 切 片 编 
排 一 个 序列 号 。 在 用 户 创建 新 的 用 户 切片 时 ，Photoshop 会 自动 地 更 新 这 一 序列 号 , 为 所 
有 切片 不 断 更 新 最 新 的 排序 。 
切片 的 绘制 应 与 Web 元 素 的 实际 尺寸 和 位 置 相 重 登 ， 这 样 才能 在 输出 Web 设计 方案 时 正确 地 将 该 
Web 元 素 的 图 像 输出 为 网 页 设计 所 应 用 的 资源 。 


(2) 提升 到 用 户 切 片 

Photoshop 允许 用 户 通 过 【提升 到 用 户 切 片 】 功 能 将 默认 切片 转换 为 用 户 切片 ， 以 
更 加 快速 而 准确 地 创建 用 户 切片 。【 提 升 到 用 户 切 片 】 功 能 是 手工 绘制 切片 有 效 的 
补充 。 

在 使 用 这 一 功能 时 ,需要 先 在 【工具 箱 】 中 启用 【切片 工具 】 加 或 【切片 选择 工具 】 
圆 ， 在 激活 其 中 任意 一 种 工具 的 状态 下 ， 将 鼠标 署 于 默认 切片 上 ， 右 击 执行 【提升 到 用 
户 切 片 】 功 能 ， 如 图 3-31 所 示 。 

相 比 手工 绘制 用 户 切片 ，【 提 升 到 用 户 切 片 】 这 一 命令 能 够 更 加 精确 地 生成 用 户 切 
片 ， 在 实际 的 切片 创建 工作 中 ， 通 常 需要 这 两 种 方式 结合 使 用 ， 以 便 更 加 高 效 地 实现 切 
片 功 能 。 

除了 右 击 饼 标 执行 【提升 到 用 户 切 片 〗 命 令 以 外 ， 用户 也 可 以 选择 默认 切片 ， 然 后 在 【工具 选项 栏 
中 单 击 【 提 升 】 扩 馈 攻 加 加， 快速 将 默认 切片 转换 为 用 户 切片 . 
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3-31_ 【提升 到 用 户 切片 】 命 令 


(3) 创建 图 层 切 片 

图 层 切片 与 图 层 有 一 层 紧 密 的 绑 定 关 系 ， 因 此 只 能 通过 图 层 来 创建 ， 在 创建 图 层 切 
片 之 前 ， 首 先 应 确定 图 层 中 必须 包含 有 效 的 显示 内 容 〈 空 图 层 是 无 法 创建 图 层 切 片 的 ) 。 
Photoshop 会 根据 图 层 中 的 显示 内 容 所 处 的 区 域 创建 对 应 的 矩形 图 层 切片 。 

创建 图 层 切 片 ， 首 先 应 在 【图 层 】 面 板 中 选择 指定 的 图 层 ， 然 后 ， 再 执行 【图 层 】 
I1【 新 建 基于 图 层 的 切片 】 命 令 ， 创 建 基于 该 图 层 的 切片 ， 如 图 3-32 所 示 。 
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图 3-32 。【 新 建 基 于 图 层 的 切片 】 命 令 
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然后 , Photoshop 就 会 自动 创建 一 个 与 该 图 层 尺 寸 和 位 置 完全 相同 的 图 层 切片 , 如 图 
3-33 所 示 。 


4. 选择 用 户 切 片 


Photoshop 根据 当前 用 户 启用 的 两 种 切片 | 
工具 ， 为 用 户 提供 了 两 种 选择 切片 的 方式 。 当 
户 所 选择 的 工具 为 【切片 工具 】 国 时， 可 以 
在 需要 选择 的 用 户 切片 上 方 右 击 和 鼠标， 选择 该 | 国 w 
用 户 切 片 | 3 


如 果 用 户 已 经 选择 了 【切片 选择 工具 ] 到 
则 可 以 直接 在 用 户 切片 上 方 单 击 鼠 标 ， 将 该 用 
户 切 片 选中 。 图 3-33 ,图 层 切 片 


5. 修改 用 户 切 片 位 置 和 尺寸 


Photoshop 将 用 户 切 片 视 为 与 选区 类 似 的 可 编辑 区 域 ,为 用 户 提供 可 视 化 的 修改 用 户 
切片 尺寸 与 位 置 的 方法 。 

首先 ， 用 户 应 使 用 【切片 选择 工具 】 国 将 用 户 切 片 置 于 选择 状态 ， 然 后 ， 即 可 对 用 
户 切 片 进行 修改 操作 。 

(1) 移动 用 户 切 片 位 置 

在 选择 了 用 户 切 片 之 后 ， 用 户 可 以 将 鼠标 置 于 用 户 切 片上 ， 按 下 鼠标 左 键 ， 直 接 对 
用 户 切 片 进行 拖 忠 操作 ， 用 户 切片 会 根据 鼠标 拖 忠 移动 的 方向 和 距离 改变 当前 的 位 置 ， 


如 图 3-34 所 示 。 


第 
3 
章 
设 
计 
网 
页 
界 
面 


Pink Shoes 


ON SALE 7 
. 和 一 
ON SALE SPEC 
[2 
> 到 更 | | 
f - Y > ed New arrivals on Foose5hoes 


CED 


New arrivals on FooseShoes 


ED 


3-34 ,移动 用 户 切 片 位 置 


SE 
> 


Photoshop 仅 为 用 户 切片 提供 了 修改 位 置 的 功能 ， 其 他 类 型 的 切片 位 置 往往 是 固定 的 , 不 允许 用 户 直 | 
接 修改 。 


(2) 修改 用 户 切 片 尺 十 
用 户 切 片 本 身 自 带 了 8 种 位 置 调节 柄 ， 用 户 可 以 在 选择 用 户 切 片 之 后 ， 直 接 拖 忠 划 


切片 边框 上 8 个 正方 形 的 调节 柄 , 以 修改 用 户 切片 在 各 个 方向 上 的 延伸 尺寸 或 收缩 尺寸 ， 
如 图 3-35 所 示 。 
| ] | 
New arrivals on FooseShoes | 


I | I 
New arrivals on Fooseshoes | 


Even80dd 


| Even80dd | 


和 图 3-35 ,修改 用 户 切片 尺寸 


6. 编辑 切片 选项 


Photoshop 可 以 将 用 户 切 片 输 出 为 实际 的 XHTML 和 CSS 代码 ， 在 Photoshop 中 ， 
提供 了 切片 选项 功能 ， 人 允许 用 户 直 接 修改 切片 的 属性 ， 以 影响 输出 的 代码 内 容 。 在 选择 
了 用 户 切片 之 后 ， 用 户 即 可 右 击 鼠标 ， 执 行 【编辑 切片 选项 】 命 令 ， 打开 【 切 片 选 项 】 
对 话 框 ， 对 用 户 切片 的 属性 进行 修改 ， 如 图 3-36 所 示 。 

在 默认 状态 下 ，【 切 片 选项 】 呈 现 为 “图 像 ” 类 型 的 切片 状态 ， 如 用 户 将 【切片 类 
型 】 修 改 为 “无 图 像 ”， 则 该 对 话 框 将 被 更 新 ， 如 图 3-37 所 示 。 


A 三 切片 类 型 5): | 无 图 像 = 


老 称 (Ni [1_Home_17| 显示 在 单元 格 中 的 文本 (: 
URHU): 


日 标 (N): 
信息 文本 (M): 
标记 (A); 


三 


X00: ): 加 230 WOD: 
MYC : 中 [973 HH 


切片 疹 景 类 型: 日 切片 有 县 类 到 (D: 背 果 色 : 癌 ] 


和 图 3-36 。[ 切 片 选项 】 对 话 杠 和 图 3-37 “无 图 像 ” 的 【切片 选项 】 对 话 框 


在 【切片 选项 】 对 话 框 中 ， 主 要 包含 三 方面 的 设置 内 容 ， 即 切片 的 Web 属性 、 切 片 
的 尺寸 和 位 置 ， 以 及 切片 的 背景 类 型 等 ， 如 表 3-10 所 示 。 


3 表 3-10 。[【 切 片 选 项 】 对 话 框 的 设置 


设 置 作 用 
切片 类 无 图 像 在 输出 切片 时 忽略 切片 覆盖 区 域内 的 图 像 ， 仅 指定 输出 的 文本 信息 
型 一 在 输出 切片 时 输出 切片 覆盖 区 域内 的 图 像 


以 表格 的 方式 输出 切片 区 域内 容 
OO 当 【 切 片 类 型 】 为 “无 图 像 ” 时 ， 定 义 输出 的 文本 信息 
名 称 当 【 切片 类 型 为 “图 像 ” 时 , 在 输出 切片 时 定义 切片 所 生成 XHTML 
标记 的 ID、CSS 的 ID 选择 器 
当 【 切 片 类 型 】 为 “图 像 ” 时 ， 在 输出 切片 时 定义 切片 所 指向 的 超 链 
接 URL 地 址 
当 【 切 片 类 型 】 为 “图 像 ” 时 ， 在 输出 切片 时 定义 切片 指向 超 链接 的 
目标 打开 方式 ， 如 top、_blank 
当 【 切 片 类 型 】 为 “图 像 ” 时 ， 在 输出 切片 时 定义 切片 内 图 像 的 描述 


信息 
当 【 切 片 类 型 】 为 “图 像 ” 时 ， 在 输出 切片 时 定义 切片 内 图 像 标记 的 
Alt 属性 〈 符 换文 本 ) 
| 定义 切片 左上 角 在 整个 设计 方案 中 的 水 平 坐 标 
定义 切片 左上 角 在 整个 设计 方案 中 的 答 直 坐标 
P= 定义 切片 的 宽度 
定义 切片 的 高 度 
定义 输出 切片 时 不 对 图 像 做 任何 修饰 
定义 输出 切片 时 添加 边框 
转让 自 色 Re 或 指定 颜色 拾取 器 拾取 的 
Te 定义 输出 切片 时 设置 切片 区 域 背景 为 黑色 ,或 指定 颜色 拾取 器 拾取 的 
颜色 


URL 


目标 
信息 文本 


Alt 标记 


尺寸 
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黑色 
其 他 定义 输出 切片 时 设置 切片 区 域 背景 为 指定 颜色 拾取 器 拾取 的 颜色 


需要 注意 的 是 ， 如 果 用 户 在 选择 了 默认 切片 后 修改 【切片 选项 】 对 话 框 中 的 尺寸 设 
置 ， 则 Photoshop 会 自动 将 这 些 设 置 应 用 到 一 个 新 建 的 用 户 切片 上 ， 另 外 ， 图 层 切片 的 
【尺寸 】 设 置 无 法 被 用 户 修改 。 


输出 Web 设计 方案 时 , 用户 除 了 需要 绘制 切片 以 外 , 还 需要 对 输出 的 图 像素 材 效果 
进行 配置 ， 使 之 在 满足 网 页 界面 效果 需求 的 情况 下 尽量 压缩 图 像 尺 寸 ， 提 高 图 像 资 源 传 
输 的 效率 。 

在 Photoshop 中 ， 用 户 可 以 打开 网 页 界面 设计 方案 ， 然 后 执行 【文件 】| 【存储 为 
Web 所 用 格式 】 命 令 ， 开 始 输出 Web 设计 方案 ， 如 图 3-38 所 示 。 

然后 ， 即 可 在 弹出 的 【存储 为 Web 所 用 格式 】 对 话 框 中 查看 当前 打开 的 设计 方案 ， 
如 图 3-39 所 示 。 

该 对 话 框 主要 包括 两 方面 的 功能 ， 即 根据 图 像 切片 裁 切 输出 网 页 ， 以 及 优化 图 像 的 
输出 效果 等 。 在 该 对 话 框 左 侧 ， 显 示 了 4 个 选项 卡 工 具 ， 用 于 以 不 同方 式 来 浏览 当前 的 
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CultN 
FO). culto 
在 Bridge 中 浏 晚 3). 


AltCul+O 
Alt+Shift+ Cul+O 


间 me 


Ctrl+W 
关闭 并 转 到 bridge Shift+Ctl+W 
存储 (S} Carl+S 
存储 为 (A)… ShiftrCerl+S 
签 入 四 
生成 » 
恢复 (V) FT2 


置 入 访 入 的 智 兹 对 象 (D-… 
下 入 链 授 的 普 阴 对 象 (K)… 
打包 (G) 


导入 (M) 
导出 日 


自动 (U) 
导 本 (R) 
文件 简介 (R.- Alt+Shift+ Ctri+l 


打印 (pl… Crl+pP 
打印 一 份 W) Alt+Shift+Chrl+P 


退出 0 Cr+Q 


3-38 


设计 方案 ， 其 具体 的 预览 方式 如 表 3-11 所 示 。 


Pink Shoes 
2013 Collection 


Nunc ron fermentum nunc Sed ut ante 
Sget leo tempor conaequst Romet eu enet 


Donec fengsm dolor ceet 


执行 【存储 为 Web 所 用 格式 】 命 令 


Home Products About 


Pages Blog Contact 


Nunc non 
eget leo te| 
Donec dig| 


100% 仿 色 
“可 选择 ” 调 板 


255 颜色 


百 画 io Iw] 


E33 @v 


图 3-39 


Lpha: 一 十 六 进 制 : 一 雪 引 : 一 


预 设 : | [未 命名 ] 
Tec 
最 佳 
] 连续 
] 优化 
] 访 入 其 色 瑟 置 文件 


口 转 摘 为 BE 
和 8: [ 旺 示 各 新 色 
元 考据 :无 
颜色 


图 像 大 小 
下 [1400 | 鲁 素 百分比 : [100 
区 12341 | 鲁 素 aa 两 次 立方 《 较 平 


证 存 结 . 


【存储 为 Web 所 用 格式 】 对 话 框 


5 


3 表 3-11 预览 设计 方案 的 选项 卡 功能 


单 击 该 选项 卡 ， 可 以 显示 没有 优化 的 图 像 

单 击 该 选项 卡 ， 可 以 显示 应 用 了 当前 优化 设置 的 图 像 
单 击 该 选项 卡 ， 可 以 并 排 显示 原稿 和 优化 过 的 图 像 
单 击 该 选项 卡 ， 可 以 并 排 显示 4 个 图 像 ， 左 上 方 为 原稿 ， 单 击 其 他 任意 一 个 图 像 ， 可 为 
其 设置 一 种 优化 方案 ， 以 同时 对 比 相互 之 间 的 差异 ， 并 选择 最 佳 的 方案 


通常 ， 如 果 图 像 包 含 的 颜色 多 于 显 
示 器 能 显示 的 颜色 ， 那 么 ， 浏 览 器 将 会 
通过 混合 它 能 显示 的 颜色 ， 来 对 它 不 能 
显示 的 颜色 进行 仿 色 或 靠近 。 用 户 可 以 
从 【 预 设 】 下 拉 列 表 中 选择 仿 色 选 项 ， 
在 该 下 拉 列 表 中 包含 12 个 预 设 的 仿 色 格 
式 ， 其 中 选择 的 参数 值 越 高 ， 优 化 后 的 
图 像 质 量 就 越 高 ， 能 显示 的 颜色 就 越 接 


近 图 像 的 原 有 颜色 。 四 文件 名 (0) eanlt htnl "| 三 租 国 
在 完成 输出 效果 的 优化 设置 之 后 ， 术 式 mr 和 习 到 

用 户 即 可 单 击 【存储 】 按 钮 ， 在 弹出 的 es 

【将 优化 结果 存储 为 】 对 话 框 中 设置 【 保 ba RE- 1 

存 类 型 】 选 项 ， 单 击 【保存 】 按 钮 将 内 


容 输出 为 Web 文档 ， 如 图 3-40 所 示 。 图 3- 和 0 ,输出 Web 文档 和 资源 
Photoshop 允许 用 户 输出 单独 的 Web 图 像 ， 也 允许 用 户 将 Web 图 像 与 相关 的 HTML 代码 一 并 输出 。 
在 网 页 的 设计 过 程 中 ， 用 户 可 根据 实际 的 需要 来 决定 洽 出 哪些 内 容 - 

习 : 设计 搜索 引擎 界面 


搜索 引擎 界面 是 一 种 典 
型 的 简单 表 单 界 面 ， 其 通常 
由 引擎 的 LOGO、 搜 索 表 单 、 
搜索 按钮 ， 以 及 其 他 修饰 元 
素 组 成 。 在 设计 搜索 引擎 界 
面 时 ， 需 要 使 用 到 Photoshop 
的 文本 处 理 功 能 来 设计 界面 
中 的 各 种 字体 ， 另 外 还 需要 
使 用 Photoshop 的 选区 功能 
和 矢量 图 形 绘制 功能 ， 2 


作 各 种 页 面 交互 组 件 ， 最 
实现 效果 如 图 3-41 所 示 ， 图 3-41 搜索 引擎 界面 效果 
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包含 一 个 Logo、 一 个 搜索 组 件 、 一 个 背景 切换 组 件 以 及 页 脚 版 权 文本 等 组 成 部 分 。 
操作 步骤 : 


在 Photoshop 中 执行 【文件 】|【 新 建 】 命 符 】 面板 中 设置 其 字符 属性 ， 如 图 3-44 
令 , 在 弹出 的 【新 建 】 对 话 框 中 设置 界面 设 所 示 。 


计 方 案 属 性 ， 单 击 【 确定 】 创 建设 计 方案 ， 
如 图 3-42 所 示 。 


名称 (N): | search 
预 设 : [ 自 定 $ 1 取消 


大 小 让 存 全 预 设 (5)… 


帘 甘 (W): |1440 [像素 日 删除 福 设 (D) 
高 度 (HH): |900 [E33 4] 
分 状 事 (R): [72 [便利 碳 寺 5 


商 色 模式 [ RG8 原色 *] [8 位 
稍 景 内 容 :[ 其 它 - :| 面 


高 3-44 ,创建 LOGO 中 的 名 称 
标 色 配置 文件 : | sRGB IEC61965-2.1 


像素 长 宽 比 ; | 方形 铺 素 日 


用 同样 的 方式 再 创建 一 个 文本 框 ， 输 入 
LOGO 的 附属 文本 内 容 , 并 在 【 字符 ] 面板 
中 设置 其 字符 属性 ， 如 图 3-45 所 示 。 


3-42 创建 界面 设计 方案 


加 在 【图 层 】 面板 创建 名 为 logo 的 图 层 组 。 
然后 ,执行 【文件 】1【 置 入 嵌入 的 智能 对 
象 ] 命令, 从 本 书 配套 光盘 对 应 目录 下 选择 
“logo.psd” 素 材 文件 ， 将 其 导入 到 设计 方 
案 中 ， 并 设置 其 中 心 点 横 坐 标 位 置 为 “627 
像素 "， 纵 坐标 位 置 为 “360 像素 "， 将 该 智 
能 对 象 拖 扣 到 logo 图 层 组 内 ， 如 图 3-43 
所 示 。 


3-45 创建 LOGO 的 附属 文本 


LOGO 的 两 个 文本 框 文本 颜色 均 为 白色 

(#EFFFFF ),Logo 文 本 使 用 的 字体 为 “Candara 
Bold Italic"， 附 属 文 本 采用 的 字体 为 微软 雅 黑 
(Microsoft YaHei Regular )。 


在 【图 层 】 面 板 创建 searcher 图 层 组 ， 在 
3-43 导入 素材 LOGO 【 工具 箱 ] 中 选择 [ 圆 角 和 矩形 工具 ] 按钮 国 ， 


在 【工具 箱 ] 中 单 击 【 横 排 文字 工具 ] 按钮 在 弹出 的 【 创建 回 角 矩形 ] 对 话 框 中 设置 其 


辆 ,在 导入 的 素材 LOGO 右 侧 创建 文本 框 ， 尺寸 和 圆 角 弧度 ， 单 击 【 确 定 ) 如 图 3-46 
输入 “Quetoch” 搜 索引 擎 名 称 ， 并 在 【 字 所 示 。 


发 了 图 3-46 ,创建 搜索 框 矢量 图 形 


图 修改 矢量 图 形 的 填充 为 白色 ( #FFFFFF )， 
清除 其 笔触 ， 然 后 执行 【 编辑 ] |【 自由 变 
换 】 命令 ， 在 【 工具 选项 栏 ] 中 设置 其 中 心 
点 横 坐 标 为 “720 像素 ”， 纵 坐标 为 “450 
像素 "， 如 图 3-47 所 示 。 


(QQuetoch 
= === = 


〖K 了 了 图 3-47 “设置 搜索 框 位 置 


贺 在 【图 层 】 面板 选中 搜索 框 的 矢量 图 层 , 执 
行 【 图 层 】1[【 图 层 样式 ] | 【 描 边 】 命令 ， 
在 弹出 的 【 图 层 样 式 ] 对 话 框 中 设置 “ 描 边 ” 
样式 属性 ， 如 图 3-48 所 示 。 


人 AM 信人 加 小 夺 


和 图 3-48 ,设置 搜索 框 描 边 


图 在 [图 层 样式 ] 对 话 框 中 左 侧 【 样式】 列表 
中 单 击 [ 内 阴影 ] 选 项 , 然后 在 右 侧 设置 “内 
阴影 ”样式 ， 单 击 【 确定 】 完成 搜索 框 的 制 
作 ， 如 图 3-49 所 示 。 


话 韦 ] [ 囊 7v 直 


和 图 3-49 ,设置 “内 阴影 ”样式 


图 再 次 在 【工具 箱 】 中 选择 【 圆 角 拢 形 工具 】 
按 馈 且 I， 在 弹出 的 【 创建 圆 角 矩 形 】 对 话 
框 中 设置 其 尺寸 和 圆 角 弧度 ， 单 击 【 确定】 
创建 搜索 按钮 的 矢量 图 形 ,如 图 3-50 所 示 。 


四 | 从 


寓 度 [0 信康 高 度 : [50 名 素 


半径 : 


5] 图 3-50 ,创建 搜索 按钮 的 图 形 


设置 该 按钮 图 形 的 中 心 点 横 坐标 为 “1130 
像素 "， 纵 坐标 为 “450 像素 "， 然 后 在 【图 
层 ] 面板 中 选择 该 图 形 , 执行 【 图 层 】1【 图 
层 样式 】1【 描 边 】 命令 ， 在 弹出 的 【 图 层 
样式 】 对 话 框 中 设置 “ 描 边 ”样式 属性 ， 如 
图 3-51 所 示 。 


和 < [一 些 
大 Ma 一 [jm 有 
EEC [ER 

到 [ 各 

和 ED 一 区 


CE 


下 二 


EE 
5 | | 请 


和 | 图 3-51 ,设置 搜索 框 “ 描 边 ”样式 属性 
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单 击 左 侧 【 样式 ] 列表 中 的 【渐变 又 加 】 项 
目 ,然后 在 右 侧 设置 其 “渐变 破 加 ”样式 属 
性 ， 完 成 该 按钮 的 制作 ， 如 图 3-52 所 示 。 


Sy | 
2 ER 


meow (lm | Le | 


站 


3-52 设置 “渐变 到 加 ”样式 属性 


执行 【文件 ] |【 置 入 嵌入 的 智能 对 象 】 命 
令 ， 从 本 书 配套 光盘 对 应 目录 下 选择 
“icon.psd” 素 材 文件 ， 将 其 导入 到 当前 设 
计 方 案 中 , 设置 其 中 心 点 水 平 坐标 为 “1128 
像素 "， 垂 直 坐 标 为 “450 像素 "， 按 下 回 车 
确认 导入 , 完成 搜索 框 和 搜索 按钮 的 全 部 制 
作 过 程 ， 如 图 3-53 所 示 。 


可 


3-53 ,完成 搜索 框 的 制作 


执行 【文件 ] |【 置 入 嵌入 的 智能 对 象 】 命 
令 ， 从 本 书 配套 光盘 中 对 应 目录 下 选择 
“Mon-.jpg” 素 材 文件 , 将 其 导入 到 当前 设计 
方案 中 ， 然 后 在 【 图 层 ] 面板 中 将 其 拖 蝶 到 
logo 和 searcher 等 两 个 图 层 组 的 下 面 ， 设 
置 其 尺寸 为 1280 像素 x 800 像素 ， 中 心 点 


水 平 坐标 为 “720 像素 ”， 
像素 "， 如 图 3-54 所 示 。 


垂直 坐标 为 “450 


3-54 导入 背景 素材 


在 【图 层 】 面 板 新 建 名 为 “album” 的 图 层 


组 , 在 该 图 层 组 内 新 建 一 个 空白 图 


层 ， 然 后 


在 【工具 箱 】 中 选择 【 矩形 选 框 工 具 】 按钮 
国 ， 然 后 在 画布 上 绘制 一 个 矩形 选区 。 执 
行 【 选 择 ] |【 变换 选区 】 命 令 ， 更 改选 区 
的 位 置 和 尺寸 ， 按 下 回 车 确认 ， 如 图 3-55 


所 示 。 


{Qetoch 


3-55 设置 选区 位 置 和 尺寸 


执行 【 编辑 ] |【 填充 ] 命令， 在 弹出 的 【 填 
充 】 对 话 框 中 设置 填充 颜色 为 黑色 
( #000000 ),【 混合 】 的 【不 透明 度 】 为 
“60%”， 单 击 【确定 ]， 如 图 3-56 所 示 。 


不 透明 度 (0): [50 
口 保留 透明 区 域 (p) 


3-56 填充 选区 


按 下 Ctrl+D 组 合 键 ， 取 消 选 


3-57 


区 ， 完 成 底部 


背景 切换 组 件 的 背景 ， 如 图 3-57 所 示 。 


{QQuetoch 


绘制 底部 组 件 背景 


执行 [文件 川 置 入 嵌入 的 智能 对 象 ] 命 令 ， 
从 本 书 配套 光盘 中 对 应 目录 下 选择 “left 


素材 文件 ， 将 其 导入 到 当前 设计 方案 


置 其 坐标 为 “105 像素 "， 垂 直 坐 


h 心 点 水 和 


标 为 “785 像素 ”"， 如 图 3-58 所 示 。 


.psd” 
Ph, 设 


图 3-58 导入 左 翻 按钮 


设置 其 中 心 点 水 平 坐标 为 “1335 像素 


直 和 4 


4 标 为 “785 像素 "， 如 图 3-59 所 


用 同样 的 方式 导入 “right.psd” 素 材 文件 ， 


3 
示 。 


3-59 


导入 右 翻 按钮 


图 在 名 为 album 的 图 层 组 中 


新 建 一 个 名 为 


monday 的 图 层 组 , 执行 【文件 ]1[ 置 入 广 
入 的 智能 对 象 命令, 再 次 导入 “Mon.jpg” 
素材 文件 , 将 导入 的 智能 对 象 放 到 monday 


图 层 组 中 , 设置 其 中 心 点 位 置 和 尺寸 , 如 
3-60 所 示 。 


3-60 ,导入 素材 


网 选中 导入 的 素材 , 执行 【图 


层 】 1 【 图 层 样 


式 】1【 描 边 】 命令 ,在 弹出 


的 【 图 层 样式 】 


对 话 框 中 设置 描 边 的 颜色 、 宽 度 等 属性 , 单 
击 【 确定 】 按钮， 如 图 3-61 所 示 。 


:| Sia | 


区 画 


EE 


[ Ew ] [ BA ] 


3-61 ,为 素材 设置 “ 描 边 ”属性 


团 通过 [图 层 ] 面板 在 导入 素材 的 上 方 新 建 一 


个 空白 图 层 ,在 【工具 箱 ] + 


选择 【 矩形 选 


框 工具 】 按钮 国 |， 然 后 在 画布 上 绘制 一 个 


和 矩形 选区 。 执 行 【 选择 】| [ 


变换 选区 】 命 


令 , 更 改选 区 的 位 置 和 尺寸 , 按 下 回 车 确认 ， 


如 图 3-62 所 示 。 
如 执行 【编辑 1[ 填充 】 命 令 ， 


在 弹出 的 【 填 


充 】 对 话 框 中 设置 填充 颜色 为 灰色 
(#777777 ),【 混合 】 模式 的 【 不 透明 度 】 
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为 “80%”， 单 击 【 确定 】 完 成 背景 设置 ， 加 ”用 同样 的 方式 , 制作 其 他 6 个 切换 图 像 ， 如 
如 图 3-63 所 示 。 到 3-65 所 示 。 


3-62 ,绘制 图 片 说 明 背 景 选区 


3-65 ,插入 和 制作 其 他 切换 图 像 与 


文本 
园 在 [图 层面 板 中 新 建 名 为 footer 的 图 层 组 ， 

he 在 【工具 箱 】 中 选择 【 横 排 文字 工具 】 按钮 

和 一 一 加 |, 在 画布 中 绘制 一 个 宽 为 “1280 像素 "、 

i 高 为 “40 像素 ”的 文本 框 ， 设 置 其 中 心 点 

[el 水 平 坐标 为 “720 像素 ”， 垂直 坐标 为 “870 

Dy 像素 "， 输 入 页 面 的 版 权 信息 ， 并 在 【字符 】 

3_63 ”填充 背景 面板 中 设置 其 “字符 ”属性 ， 即 可 完成 整个 


案例 ， 如 图 3-66 所 示 


贺 在 【工具 箱 ] 中 选择 【 横 排 文字 工具 】 按钮 
辆 ， 在 画布 中 绘制 一 个 与 上 一 步 背景 尺 十 
和 位 置 完 全 相同 的 文本 框 , 输入 “Monday” 
文本 , 并 在 【字符 】 面板 设置 “字符 ”属性 ， 
如 图 3-64 所 示 。 


3-66 ,制作 版 权 信息 


3-64 ,制作 切换 文本 


3.6 课堂 练习 : 设计 网 站 登录 界面 


网 站 登录 页 是 一 种 具备 简单 交互 功能 的 网 页 ， 其 通常 由 网 站 Logo、 网 站 登录 组 件 以 


及 版 权 声 明 等 内 容 组 成 。 在 设计 网 站 登录 界面 时 ， 需 要 大 量 使 用 Photoshop 的 文字 工具 ， 
同时 也 需要 绘制 一 些 矢量 图 形 作 为 网 页 元 素 的 背景 ， 如 图 3-67 所 示 。 


[ClLBoc 专 喘 建筑 资 调 库 
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图 3-67_。 网 站 登录 界面 


本 案例 由 于 采用 了 整体 的 背景 ， 因 此 需要 为 界面 提供 足够 宽度 的 背景 图 像 ， 以 保障 在 高 分 辩 率 的 显 
示 器 下 能 够 实现 完整 的 显示 效果 ， 实 际 案例 的 尺寸 为 2560 像素 x 760 像素 ， 在 上 图 的 浏览 效果 中 ， 
仅仅 截取 了 界面 设计 方案 正中 央 宽 度 为 1280 像素 的 显示 区 域 。 


操作 步骤 : 
在 Photoshop 中 执行 【文件 ] |【 新 建 ] 命 园 在 [图 层 】 面 板 中 创建 名 为 background 的 
令 , 在 弹出 的 【新 建 】 对 话 框 中 设置 界面 设 图 层 组 ， 然 后 执行 【文件 ] 1 【 置 入 嵌入 的 
计 方 案 的 宽度 、 高 度 以 及 分 辩 率 等 属性 , 单 智能 对 象 ] 命令 ， 从 本 书 配套 光盘 对 应 目录 
定 】 创 设 i ， 如 图 3-68 
人 I 建 界 面 设计 方案 ， 如 图 下 导入 “background.png” 素 材 文档 ,将 
其 平 铺 到 画布 中 ， 如 图 3-69 所 示 。 
者 称 (N): | 未 标 吴 -1 
预 设 [B 定 4 
大 小 引 | [_ 存 仿 祯 娘 (S)..，] 
宽度 W): [2560 [全 素 引 删除 祯 疫 [D 
高 度 HHj: [760 [EE3 
分 辩 龙 (R): [72 [ 鳃 末 /英寸 5] 
状 久 模式 ROB 项 色 >] [8 位 
LE | 
高 3-69 ,导入 素材 背景 
新 色 开 置 文件 : | 工作 中 的 RGB: sR6B -3] 
5 形 吉 J 新 建 名 为 header 的 图 层 组 ， 将 其 置 于 
background 图 层 组 上 方 , 然后 在 【 工具 箱 】 
3-68 创建 设计 方案 中 选择 【矩形 工具 】 按钮 国有 ， 单 击 画 布 ， 
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在 弹出 的 【 创建 矩形 】 对 话 框 中 设置 其 尺寸 
为 “2560 像素 ”x “80 像素 "， 单 击 【 确 
定 】， 然 后 设置 该 矢量 矩形 的 中 心 点 横 坐 标 


为 “1280 像素 "， 纵 坐标 为 
图 3-70 所 示 。 


“40 像素 ， 如 


属性 ， 如 图 3-73 所 示 。 


CllBoc 


337b91 


3-72 设置 Logo 图 标 文本 内 部 的 


3-70_。 绘 制 页 头 背 景 矩 形 


在 【图 层 】 面板 内 为 header 图 层 组 创建 一 


个 名 为 Logo 的 子 图 层 组， 在 【 工具 箱 ] 中 


选择 【 横 排 文字 工具 】 按 钮 大 国 ， 单 击 页 头 


位 置 ， 输 入 “CILBoc” 文 本 


内 容 , 并 在 【 字 


符 ] 面板 设置 其 属性 , 设置 其 左 侧 垂直 中 点 
的 横 坐标 为 “660 像素 ， 纵 坐标 为 “40 像 


素 "， 如 图 3-71 所 示 。 


[CllBoc 


272822 


图 3-71 ,制作 Logo 图 标 文本 


加 再 次 在 【工具 箱 】 中 选择 【 


横 排 文 字 工 具 】 


按钮 国 由 ， 选 择 Logo 图 标 文本 中 的 “LBo” 
等 三 个 字符 ， 在 【 字符 】 面 板 中 设置 其 前 


景色 为 蓝 灰色 ( #3a7b91 
所 示 。 


)， 如 图 3-72 


回 用 同样 的 方式 , 制作 Logo 中 的 系统 中 文 名 


称 文本 , 并 在 【 字符 ] 面板 + 


设置 其 “字符 ” 


前 景 分 色 


272822 


3-73 设置 Logo 中 文 名 称 “字符 ” 
属性 
再 用 同样 的 方式 创建 Logo 内 的 系统 的 英文 
名 称 文本 ， 并 在 【字符 ] 面板 中 设置 其 “ 字 
符 ” 属 性 ， 如 图 3-74 所 示 。 


云端 建筑 资料 库 
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图 3-74 ,设置 Logo 英文 名 称 “ 字 符 ” 
属性 
贺 莉 图 层面 板 内 创建 名 为 signin 的 图 层 组 ， 
在 该 图 层 组 内 再 创建 一 个 名 为 background 
的 子 图 层 组 ， 在 【 工具 箱 】 中 选择 【 矩形 工 


具 】 按 钮 胃 ， 画 布 中 单 击 鼠 标 左 键 ， 在 弹 
出 的 【 创建 矩形 】 对 话 框 中 设置 其 尺寸 , 单 
击 [ 确定 ] 按 钮 , 作为 登录 框 背景 如 图 3-75 
所 示 。 


要 度 :|500 像素 」 高度 : 
口内 中 心 
确定 


3-75 绘制 登录 框 背 景 


该 登录 框 背景 的 填充 颜色 为 白色 (#EFFFFF )， 
笔触 为 空 ， 中 心 点 水 平 坐标 为 “1280 像素 ”， 
重 直 坐标 为 “322.50 像素 ”。 


加 在 [图 层 ] 面板 中 设置 该 登录 框 矢量 矩形 背 
景 的 【填充 】 透明 度 为 “80%”， 如 图 3-76 
所 示 。 


3-76_。 设 置 背景 的 填充 透明 度 


用 同样 的 方式 再 绘制 一 个 矢量 矩形, 作为 登 
录 框 的 顶部 边框 线 , 填充 其 颜色 为 深蓝 灰色 


在 登录 框 内 输入 “-- 账 户 登 录 --” 的 标 
题 文 本 , 并 设置 其 “字符 ” 属性, 如 图 3-78 
所 示 。 


012634 


3-77_ 绘制 顶部 边框 


012634 


3-78 ,制作 登录 框 的 标题 


在 form 图 层 组 内 再 创建 一 个 名 为 input 的 图 
层 组 , 在 【工具 箱 】 中 选择 【 矩形 工具 】 按 
钮 于 ， 在 画布 中 绘制 矩形 ， 并 在 【 工具 选 
项 栏 ] 中 设置 其 属性 , 将 其 作为 登录 账户 的 
文本 框 背景 ， 如 图 3-79 所 示 。 


( #012634 ), 将 其 移动 至 紧 贴 背景 矩形 上 方 
的 位 置 ， 如 图 3-77 所 示 。 

在 【 图 层 ] 面板 中 为 signin 图 层 组 中 再 创建 
一 个 名 为 form 的 子 图 层 组 ， 将 其 移动 至 
background 子 图 层 组 的 上 方 。 然 后 在 【 工 
具 箱 】 中 选择 【 横 排 文字 工具 ] 按钮 有 


3-79 设置 矢量 矩形 属性 


执行 【文件 】1【 置 入 嵌入 的 智能 对 象 ] 命令 ， 
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从 本 书 配套 光盘 中 对 应 目录 下 选择 
“username .png” 素 材 文 件 ， 将 其 导入 到 当前 
设计 方案 , 设置 其 尺寸 和 位 置 , 如 图 3-80 所 示 。 


3-80 ,导入 素材 图 标 


在 【工具 箱 】 中 选择 【 横 排 文字 工具 】 按钮 
辆 ， 在 登录 账户 的 文本 框 上 绘制 一 个 尺寸 
为 宽 “220 像素 "、 高 “32 像素 ”的 文本 框 ， 
输入 “请 输入 系统 账户 ”提示 文本 。 然 后 ， 
在 【字符 】 面板 设 置 其 “字符 ”属性 ， 如 图 
3-81 所 示 。 


3-81 _ 输 入 提示 文本 并 设置 属性 


在 【段落 】 面 板 中 设置 提示 文本 居中 对 齐 ， 
如 图 3-82 所 示 。 


3-82_。 设 置 居 中 对 齐 
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四 用 同样 的 方式 , 导入 素材 并 制作 密码 框 的 效 
果 ， 如 图 3-83 所 示 。 


请 给 入 系统 胀 户 


3-83_。 制 作 密码 框 效果 


在 form 图 层 组 下 创建 checkbox 图 层 组 ， 
绘制 一 个 填充 与 边框 和 之 前 文本 框 背景 相 
同 的 矢量 正方 形 , 设置 其 尺寸 和 位 置 ， 作 为 
复 选 框 背景 ， 如 图 3-84 所 示 。 


3-84 绘制 复 选 框 背 景 


在 【工具 箱 】 中 选择 【 横 排 文 字 工 具 】 按钮 
国 I， 在 复 选 框 右 侧 绘制 文本 框 ， 输 入 提示 文 
本 并 设置 其 “字符 ”属性 ， 如 图 3-85 所 示 。 


Of82b3 


3-85 输入 并 设置 提示 文本 


在 上 一 段 输入 框 右 侧 再 次 创建 一 个 输入 框 ， 
输入 “忘记 密码 ? ”文本 ,然后 用 同样 的 方 
式 设置 其 “字符 ”属性 ， 并 在 【段落 】 面板 
设置 其 居 右 对 齐 ， 如 图 3-86 所 示 。 


口 xB 好 SEN? 


3-86 设置 右 侧 提示 文本 


国 在 form 图 层 组 中 再 新 建 一 个 名 为 submit 
的 子 图 层 组 ， 在 【 工具 箱 】 中 选择 【 圆 角 所 
形 工具 】 按 钮 攻 国 ， 单 击 画 布 上 的 登录 框 矢 
量 背 景区 域 ， 在 弹出 的 【 创建 圆 角 和 矩形 ] 对 
话 框 中 设置 【 宽度 ]【 高 度 】 以 及 四 个 角 的 
圆 角 【 半径 】， 单 击 【 确定 】 绘制 圆 角 和 矩形 ， 
如 图 3-87 所 示 。 


3-87_。 绘 制 登 录 按 钮 背景 


保持 选择 [ 圆 角 和 矩形 工具 ] 按钮 国 , 在 [ 工 
具 选 项 栏 ] 中 设置 矢量 图 形 的 填充 色 为 蓝 色 
( #0f82b3 )， 然 后 再 执行 【编辑 】|【 自由 变 
换 路 径 ] 命令 ， 在 【 工具 选项 栏 ] 中 设置 其 

中 心 点 水 平 坐标 为 “1280 像素 ”， 垂直 坐标 
为 “400 像素 "， 如 图 3-88 所 示 。 

在 【工具 箱 】 中 选择 【 横 排 文 字 工具 】 按钮 
畏 ， 在 画布 中 绘制 一 个 尺寸 与 之 前 登录 按 


网 在 form 图 层 组 下 新 建 signin 子 图 层 组 ， 制 


钮 背景 相同 的 文本 框 , 输入 “登录 系统 ” 文 
本 ， 然 后 在 【字符 】 面 板 设 置 其 字符 属性 ， 
并 在 【段落 】 面 板 设 置 其 居中 对 齐 ， 如 图 
3-89 所 示 。 


口 Fw 自强 录 忘记 密码 ? 


ofs2b3 


3-88 设置 登录 按钮 背景 和 位 置 


口 Tw 和 二 录 忘记 丁 码 ? 
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3-89 ,制作 按钮 文本 


作 提示 注册 的 文本 , 其 样式 与 复 选 框 文本 相 
同 ， 居 中 对 齐 ， 完 成 登录 框 的 内 容 制作 ， 如 
图 3-90 所 示 。 


口 wh 


+ 没有 要 时? 立即 宇 骨 一 一 


3-90 ,制作 注册 文本 


加 在 【图 层 】 面板 新 建 footer 图 层 , 将 其 置 于 
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signin 图 层 组 和 background 图 层 组 之 间 。 
然后 ， 在 【工具 箱 】 中 选择 【 珑 形 工具 】 按 
馈 且 ， 绘 制 一 个 宽 为 “2560 像素 "、 高 为 
“40 像素 "、 中 心 点 横 坐标 为 “1280 像素 ”、 
纵 坐 标 为 “740 像素 ”的 矩形 ， 为 其 填充 黑 
色 ( #000000 )， 清 除 笔触 ， 使 之 横 跨 整个 
画布 , 作为 页 脚 版 权 部 分 的 背景 ,如 图 3-91 
所 示 。 


所 示 。 


3-91 绘制 页 脚 版 权 背 景 


困 在 [工具 箱 } 选 择 [ 横 排 文字 工具 ] 按 钮 E， 
在 画布 中 绘制 一 个 宽 “1280 像素 ， 高 “40 
像素 "， 中 心 点 坐标 与 之 前 绘制 页 脚 版 权 背 
景 相 同 的 文本 框 , 并 在 该 文本 框 中 输入 版 权 
声明 文本 ， 在 【字符 】 面 板 设置 其 “字符 ” 
属性 ， 如 图 3-92 所 示 。 

贺 在 【段落 ] 面板 设置 这 些 版 权 声明 文本 为 
居 右 对 齐 ， 左 右 间距 均 为 “20 像素 "， 即 
可 完成 整个 界面 方案 的 设计 ， 如 图 3-93 


3-92 ,设置 页 脚 版 权 文本 “字符 ” 


图 3-93 ,设置 页 脚 文本 “段落 ”属性 


1.【 和 矩形 选 框 工具 】 可 以 选择 各 种 长 宽 比 的 
本 和 的 区 域 ， 
帮助 用 户 对 该 类 区 域 进行 编辑 操作 。 

2. 用 户 可 以 执行 【选择 】|【 全 选 】 命 令 ， 
或 按 下 组 合 键 ， 来 将 画布 中 所 有 元 素 
选中 。 

3. Photoshop 提供 了 两 种 主要 的 工具 以 处 理 
文本 内 容 ， 即 和 。 

4. Photoshop 内 置 了 4 种 基本 消除 锯齿 的 模 
式 ， 即 和 

， 这 些 消 除 锯齿 模式 可 以 增加 像素 
点 或 减少 像素 点 的 方式 来 对 字体 显示 效果 进行 


5. Photoshop 的 切片 根据 其 作用 和 生成 的 机 
理 ， 可 以 划分 为 三 种 形式 ， 即 


和 等 。 
6. 段落 面板 主要 承载 了 三 方面 的 功能 ， 即 
段落 文本 的 、 以 及 
二 、 选 择 题 


1. 以 下 哪 种 工具 无 法 直接 创建 选区 ? 


A. 矩形 选 框 工具 
B. 椭圆 选 框 工具 
C. 横 排 文字 工具 


D. 魔 棒 工 具 
2. 使 用 选取 工具 ， 可 以 创建 一 个 
正方 形 与 圆 形 选 区 。 
A.【 和 矩形 选 框 工具 】 和 【多 边 形 套 索 
工具 】 
B.【 多 边 形 套 索 工具 】 和 【椭圆 选 框 
工具 】 
C.【 和 矩形 选 框 工具 】 和 【椭圆 选 框 
工具 】 
D.【 多 边 形 套 索 工具 】 和 【和 拢 形 选 杠 
工具 】 
3.【 取 消 选择 】 选 区 范围 命令 的 快捷 键 是 


A. ShifttD B. CtrltD 

C. Alt+D D. CtltAlttD 
4. 对 选区 进行 变形 的 快捷 键 是 。 

A. CtrlHT B. CtltF 


C. ShifttT D. 没有 快捷 键 
5. 对 颜色 区 域 进行 选择 ， 使 用 的 工具 是 


A. 套 索 工具 
B. 椭圆 形 选 框 工具 
C. 魔 棒 工 具 
D. 多 边 形 套 索 工具 


三 、 简 答题 


1. 简 述 选区 的 作用 和 使 用 选区 的 方法 。 

2.【 快 速 选 择 工 具 】 和 【上 糜 棒 工具 】 之 间 有 
什么 区 别 ? 

3. 如何 清除 Photoshop 文本 的 锯齿 ? 

4. 切片 都 有 哪些 类 型 ? 

5. 在 输出 界面 设计 方案 时 都 有 哪些 注意 
事项 ? 


是 ya 
如 吕梁 
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绘制 动画 元 素 


4.1 Flash 使 用 基础 


4 iasnD MI 


1996 年 发 布 的 Flash 软件 仅仅 提供 了 几 种 简单 的 矢量 工具 和 时 间 轴 ， 人 允许 用 户 在 时 
间 轴 上 绘制 和 制作 简单 的 逐 帧 动画 。 在 20 世纪 末期 , 原 出 品 公司 Macromedia 逐渐 为 Flash 
增添 了 重要 的 扩展 功能 ,如 在 1997 年 为 Flash 引入 库 的 概念 ，1998 年 引入 影片 前 辑 和 独 
立 的 FlashPlayer 播放 器 ， 截 止 到 2005 年 ，Macromedia 公司 已 经 将 Flash 在 动画 设计 方 
面 的 功能 基本 完善 ， 使 之 成 为 了 动画 设计 行业 的 标杆 。 

2005 年 底 ，Adobe System 公司 收购 了 Macromedia 公司 ， 将 原 Flash 纳入 了 Adobe 
Creative Suite (创意 套件 ) 体系 中 ， 并 完成 了 一 项 重要 的 工作 ， 就 是 引用 了 强 类 型 的 
ActionScript 3.0 脚本 语言 ， 完 全 重新 编写 了 Flash 动画 的 AVM 虚拟 机 ， 使 Flash 动画 的 
执行 效率 更 高 ， 开 发 标准 也 更 加 完善 。 

随 着 移动 互联 网 技术 的 发 展 ，Adobe 逐渐 增强 Flash 的 移动 端 动画 设计 功能 ， 使 之 
与 iPhone、iPad 等 手持 设备 具备 更 加 完善 的 兼容 性 ， 降 低 Flash 动画 在 这 些 设备 上 播放 
的 资源 消耗 ， 提 高 Flash 动画 在 移动 端的 执行 效率 。 

今天 的 Flash 不 断 拓展 在 动画 设计 方面 的 功能 ， 与 全 新 的 硬件 设备 结合 ， 帮 助 用 户 
在 更 多 丰富 的 平台 上 设计 动画 。 另 外 ，Flash 也 在 不 断 更 新 自身 的 兼容 性 能 ， 如 能 够 输出 
HTML 5 动画 等 ， 帮 助 网 页 设计 者 在 更 多 生产 环境 中 更 简便 地 创建 动画 界面 元 素 。 


Adobe 公司 在 引入 了 Creative Cloud 概念 (云端 创意 平台 ) 之 后 ,对 FLash 软件 的 界 
面 进行 了 较 大 的 改进 ， 使 之 能 够 更 加 满足 现代 设计 用 户 的 实际 需求 。 同 时 ， 其 也 提供 了 
自 定义 用 户 界面 的 功能 ， 其 主体 界面 如 图 4-1 所 示 。 


人 7 图 4-1 ,Flash CC 主体 界面 
与 Photoshop CC 类 似 , Flash CC 的 主体 界面 也 分 为 若干 功能 区 域 , 包括 1- 标 题 菜 单 
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栏 、2- 文 档 窗口 、3- 时 间 轴 面板 、4- 压 缩 面板 栏 和 展开 面板 栏 、6- 工 具 箱 等 。 

1. 标题 菜单 栏 

为 尽量 节省 界面 控件 , Flash 将 传统 Windows 应 用 程序 的 标题 栏 和 菜单 栏 合并 为 【 标 
题 菜 单 栏 】， 整 合 了 这 两 个 工具 栏 的 功能 ， 在 【标题 菜单 栏 】 中 ， 最 左 侧 是 Flash 软件 
的 图 标 ， 然 后 是 11 个 菜单 选项 ， 如 表 4-1 所 示 。 
5 和 表 4-1 。 标题 菜单 栏 的 菜单 选项 


菜单 选项 作 用 

文件 用 于 文件 级 别 的 操作 ， 包 括 动画 方案 的 打开 、 关 闭 、 保 存 以 及 资源 的 导入 、 导 出 ， 以 及 
动画 方案 的 发 布 等 功能 

编辑 用 于 对 当前 所 选 内 容 或 时 间 轴 中 各 种 元 素 的 复制 、 剪 切 、 粘 贴 、 删 除 ， 以 及 Flash 自身 
的 软件 环境 配置 等 


视图 提供 若干 查看 文档 窗口 的 具体 方式 ， 以 及 标尺 、 辅 助 线 等 辅助 工具 的 设置 和 应 用 


插入 用 于 为 舞台 或 时 间 轴 插入 帧 、 元 件 和 图 层 


修改 修改 形状 、 元 件 、 时 间 轴 对 象 等 动画 元 素 


调试 Flash 动画 的 测试 、 调 试 和 脚本 断 点 功能 
窗口 管理 Flash 中 的 各 种 面板 和 工具 
帮助 提供 软件 的 帮助 信息 和 技术 支持 


2. 文档 窗口 


【文档 窗口 】 的 作用 与 Photoshop 中 的 【图 像 内 容 区 】 类 似 ， 可 显示 当前 正在 编辑 的 动画 
场景 舞台 ， 并 允许 设计 者 在 此 处 对 舞台 上 所 有 动画 元 素 进行 编辑 操作 ， 展 示 编辑 的 效果 。 

在 Flash CC 中 ， 设 计 者 可 以 同时 打开 多 个 动画 设计 方案 ， 在 使 用 Flash 创建 或 打开 
多 个 动画 设计 方案 后 ，【 文 档 窗口 】 将 显示 三 个 组 成 部 分 ， 即 【选项 卡 】 栏 、【 状 态 】 
栏 和 【舞台 】 区 域 。 如 设计 者 仅 打开 了 一 个 动画 设计 方案 ， 则 【选项 卡 】 栏 将 被 隐藏 。 

(1)【 选 项 卡 】 栏 

【选项 卡 】 栏 主要 用 于 显示 Flash 【文档 窗口 】 当 前 已 经 打开 的 所 有 动画 方案 文档 的 
标题 ， 供 设计 者 切换 显示 这 些 动画 方案 ， 如 图 4-2 所 示 。 


EE 
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和 图 4-2 .文档 窗口 的 选项 卡 切 换 


设计 者 可 以 单 击 任意 该 栏 中 任意 一 个 选项 卡 ， 显 示 该 选项 卡 对 应 的 动画 方案 文档 ， 
也 可 以 单 击 选项 卡 内 右 侧 的 【关闭 】 按 钮 国 ， 关 闭 该 动画 方案 文档 。 


(2)【 状 态 】 栏 

【状态 】 栏 的 作用 是 显示 当前 打开 的 内 容 从 属于 哪 一 个 场景 、 元 件 和 组 等 ， 从 而 反映 
内 容 与 整个 文档 的 目录 关系 。 单 击 【 上 行 】 按 钮 圈 ， 用 户 可 以 方便 地 跳 转 到 上 一 个 级 别 。 

【状态 】 栏 右 侧 提供 了 【编辑 场景 】 按 钮 圆 和 【编辑 元 件 】 按 钮 图. 单 击 这 两 个 按 
钮 ， 可 以 分 别 查 看 当前 Flash 文档 所 包含 的 场景 和 元 件 列表 。 选 择 其 中 某 一 个 项 目 ， 可 
以 对 其 进行 编辑 。 

除 此 之 外 ，【 状 态 】 栏 右 侧 还 提供 了 【有 舞台 居中 】 按 钮 图 ， 用 于 将 舞台 中 心 点 与 当 
前 文档 窗口 正中 央 对 齐 。 

在 【状态 】 栏 的 最 右 侧 是 一 个 下 拉 菜 单 控件 ， 其 用 于 设置 和 显示 当前 动画 设计 方案 
的 缩放 比例 ， 单 位 为 百分比 。 

(3)【 和 舞台 】 区 域 

【舞台 】 区 域 显示 了 当前 创建 或 打开 的 动画 设计 方案 文档 的 内 容 , 其 显示 内 容 通 常会 
与 设计 者 在 【时 间 轴 】 面板 中 选择 的 某 一 帧 的 内 容 相 对 应 。 借 助 【 工 具 箱 】 中 的 各 种 工 
具 ， 用 户 可 以 快速 地 对 【舞台 】 区 域内 的 各 种 动画 元 素 进行 编辑 操作 。 


3.【 时 间 轴 】 面 板 


Flash 默认 的 工作 区 方案 会 自动 将 【时 间 
轴 】 面 板 放置 于 文档 窗口 下 方 ， 该 面板 主要 用 ee 
于 显示 当前 动画 设计 方案 中 各 种 帧 的 信息 以 及 

图 4-3 【时 间 轴 】 面板 
图 层 的 排列 ， 如 图 4-3 所 示 。 人 B43 。[ 时 


4. 压缩 面板 栏 和 展开 面板 栏 


在 Flash CC 中 ,用 户 可 以 采用 软件 预 署 的 工作 区 方案 ， 或 自行 修改 和 定义 工作 区 方 
案 。 每 一 种 工作 区 方案 都 会 特定 地 在 【压缩 面板 栏 】 和 【展开 面板 栏 】 显 示 儿 个 相关 的 
面板 ， 每 一 个 面板 都 会 提供 指定 的 若干 功能 。 

【压缩 面板 栏 】 和 【展开 面板 栏 】 的 作用 是 显示 一 些 常见 的 面板 或 面板 的 快捷 按钮 。 
其 中 , 面板 的 快捷 按钮 会 显示 在 压缩 面板 栏 , 而 普通 展开 的 面板 则 会 显示 在 展开 面板 栏 。 

以 默认 的 “基本 功能 ”【 工 作 区 】 布 局 为 例 ， 其 会 在 压缩 面板 栏 中 显示 【颜色 】 面 
板 、【 样 本 】 面 板 、【 对 齐 】 面 板 、【 信 息 】 面 板 、【 变 形 】 面 板 和 【动画 预 设 】 面 板 
等 面板 的 图 标 ， 在 展开 面板 栏 中 显示 【属性 】 检 查 器 和 【 库 】 面 板 等 。 


5.【 工 具 箱 】 


【工具 箱 】 的 作用 是 提供 Flash 矢量 绘制 和 动画 制作 所 必须 的 各 种 工具 按钮 ， 每 一 种 
工具 按钮 都 代表 着 Flash 中 的 一 种 基本 功能 。 
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随 着 Flash 版 本 的 提升 和 功能 的 增强 , 【工具 箱 】 中 的 工具 按钮 也 逐渐 增加 。 在 Flash 
CC 版 本 中 ， 共 提供 了 33 种 工具 按钮 。 出 于 篇 幅 的 考虑 ， 在 此 将 不 一 一 次 述 。 


在 设计 Flash 动画 之 前 , 设计 者 首先 需要 了 解 的 是 Flash 动画 的 文档 类 型 、 创 建 Flash 
动画 的 方法 ， 以 及 Flash 动画 设计 方案 的 一 些 基本 设置 ， 诸 如 文档 设置 等 。 


早期 的 Flash 专注 于 动画 的 设计 ， 随 着 Web 开发 技术 的 发 展 ， 如 今 的 Flash 已 经 逐 


渐 成 为 一 个 综合 的 Web 动画 设计 平台 ， 


间 动 画 发 展 为 由 脚本 控制 的 复杂 交互 动画 。 
所 有 由 Flash 创建 的 动画 均 存 储 在 扩展 名 为 “.Ha” 的 动画 设计 方案 中 ， 根 据 动画 的 

建 以 下 几 种 类 型 的 动画 ， 如 表 4-2 所 示 。 

S52 表 4-2 Flash 动画 文档 类 型 


用 途 ，Flash CC 支持 包 


创建 用 于 HTML5 Canvas 的 动画 


其 支持 创建 的 动画 也 逐渐 由 传统 的 逐 帧 动画 、 补 


Web 源 代 码 和 资源 ， 包 括 js 文件 、 


HIML 5 Cavas 资源 。 通 过 使 用 帧 脚本 中 的 | 图 像 资 源 、 声 音 资源 、HIML 文档 
JavaScript, 为 Web 资源 添加 交互 性 | 等 
为 WebGL 技术 创建 动画 资源 ， 但 动画 
WebGL 不 支持 脚本 编写 或 交互 性 功能 基于 JSON 架构 的 动画 资源 代码 
. 传统 的 基于 ActionScript 3.0 脚本 语 | 传统 的 Swift 动画 文件 ， 扩 展 名 为 
ActionScript 3.0 言 的 Flash 动画 «swf’ 
Desktop 基于 桌面 操作 系统 的 富 互 联网 应 用 
Android 基于 Android 手机 操作 系统 的 富 互 | 传统 的 Swift 动画 文件 ， 扩 展 名 为 
AIR 纪 联网 应 用 “swf”, 或 由 AIR 播放 器 解析 执行 的 
es 基于 IOS 手机 操作 系统 的 富 互联 网 | 扩展 名 为 “.swe” 的 可 执行 程序 
应 用 
0 ActionScript 3.0 脚本 类 代码 
3 各 和 时。 | ActionSeript 3.0 脚本 接口 代码 ”| 扩展 名 为 “as" 的 文本 文件 
脚本 一 
人 文 普通 ActionSeript 脚本 文件 
Flash 基于 JavaScript 语 言 编 写 的 Flash 动 ee if E. 
JavaSeript 文件 | 画 脚本 代码 扩展 名 为 “jsfl* 的 文本 文件 
在 实际 的 开发 中 ， 用 户 应 该 根据 所 需 应 用 的 平台 来 决定 创建 哪 一 种 类 型 的 动画 设计 


方案 ， 并 根据 平台 来 进行 方案 的 设计 和 发 布 。 
Flash 文档 本 身 基本 是 由 场景 一 舞台 一 帧 一 元 件 一 资源 等 5 个 层级 构成 的 ,一 部 Flash 
影片 通常 包含 若干 个 场景 ， 每 个 场景 下 具备 一 个 独立 的 舞台 ， 包 含 特定 的 舞台 设置 (如 


影片 的 尺寸 、 背 景色 、 帧 频 等 ) ; 每 个 舞台 包含 一 个 时 间 轴 ， 


1 时 间 轴 中 的 帧 来 决定 播 


放 什 么 内 容 ， 每 一 个 帧 都 可 以 包含 若干 元 件 ， 而 元 件 内 又 可 以 包含 子 时 间 轴 ， 以 及 在 该 


子 时 间 轴 上 播放 的 其 他 子 元 件 、 矢 量 图 形 、 位 图 图 像 、 文 本 、 视 频 、 音 频 等 多 媒体 资源 。 
Flash 正 是 通过 这 种 基本 的 层级 结构 ， 确 定 各 种 素材 、 元 件 、 帧 、 舞 台 和 场景 的 调 上 
关系 。 设 计 者 应 非常 了 解 这 种 层级 关系 ， 才 能 深入 理解 Flash 动画 的 原理 。 


Flash CC 提供 了 两 种 方式 来 创建 动画 设计 方案 , 一 种 是 通过 启动 Flash CC 时 的 开始 
屏幕 快捷 方式 来 创建 动画 设计 方案 ， 另 一 种 则 是 通过 文件 命令 来 创建 动画 设计 方案 。 
1. Flash CC 开始 屏幕 


在 启动 Flash CC 之 后 ， 默 认 会 在 
Flash 文档 窗口 内 打开 Flash CC 开始 屏 
幕 界面 ， 该 界面 中 提供 了 所 有 Flash 可 
以 创建 的 动画 设计 方案 类 型 , 用 户 可 以 
直接 单 击 对 应 的 动画 设计 方案 , 然后 进 
行 创建 ， 如 图 4-4 所 示 。 

Flash CC 开始 屏幕 除了 可 以 创建 
动画 设计 方案 以 外 , 还 提供 了 最 近 打开 
项 目的 快捷 方式 ， 以 及 相关 资源 的 链 
接 ， 如 Flash CC 的 简介 以 及 学 习 中 心 
网 站 等 。 


2. 执行 文件 命令 


在 Flash CC 中 ， 设 计 者 也 可 以 通 ff 图 4-4 Flash CC 开始 屏幕 

过 命令 来 打开 向 导 , 以 步 进 的 方式 创建 

Flash 设计 方案 。 执 行 【 文 件 】|【 新 建 】 命 令 ， 然 后 即 可 打开 【新 建文 档 】 对 话 框 ， 在 
该 对 话 框 中 ， 包 含 两 个 常规 选项 卡 ， 其 一 为 创建 空白 动画 设计 方案 ， 其 二 则 为 根据 模板 
来 创建 动画 设计 方案 ， 在 此 重点 介绍 第 一 个 选项 卡 ， 如 图 4-5 所 示 。 


卜 图 4-5 。[ 新 建文 档 】 对 话 杠 


该 对 话 框 的 首 个 选项 卡 主要 分 为 两 个 部 分 , 左 侧 为 动画 方案 所 使 用 的 文档 类 型 选项 ， 


页 
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右 侧 则 为 对 该 类 型 动画 方案 的 具体 设置 。 设 计 者 可 以 单 击 左 侧 的 【类 型 】 列 表 中 任意 的 
文档 类 型 项 目 ， 然 后 在 右 侧 设置 该 文档 的 具体 属性 ， 单 击 【 确 定 】 按 钮 完成 动画 设计 方 
案 的 创建 。 

在 创建 【类 型 】 列 表 中 ， 前 6 种 设计 方案 文档 为 动画 文档 ， 而 后 4 种 设计 方案 文档 
则 为 脚本 文档 ， 其 设置 属性 各 不 相同 。 

Flash 为 动画 文档 类 型 提供 了 5 种 设置 属性 ， 其 作用 如 表 4-3 所 示 。 


和 图 4-3_, 动 画 文档 的 属性 
属 性 作 用 
定义 动画 文档 的 宽度 


帘 
高 定义 动 而 文档 的 高 度 

以 绝对 单位 英寸 为 单位 来 定义 动画 文档 的 尺寸 

以 绝对 单位 英寸 为 单位 定义 动 而 文档 的 尺寸 ， 进 制 规 则 为 10 进 制 
标尺 以 绝对 单位 派 卡 点 为 单位 定义 动画 文档 的 尺寸 
单位 | 厘 来 ”| 以 绝对 单位 厘米 为 单位 来 定义 动 而 文档 的 尺寸 

以 绝对 单位 毫米 为 单位 来 定义 动 面 文档 的 尺寸 

| 像素 ”| 以 相对 单位 像素 为 单位 来 定义 动 而 文档 的 尺寸 
六 定义 动 揪 放 时 每 一 在 大 中 芝 示 时 所 上 的 时 间 ， 时 认 为 24 帧 全 
青 芝 磊 色 定 又 动画 文档 的 青 景 项 色 

通常 情况 下 Flash 动画 都 是 基于 计算 机 屏幕 的 多 媒体 产品 ， 因 此 通常 应 使 用 像素 作 


为 设计 方案 的 长 度 单位 。 但 是 如 果 需 要 针对 某 一 种 特定 尺寸 屏幕 设备 来 适 配 的 话 ， 则 应 
根据 该 设备 的 具体 物理 尺寸 来 使 用 对 应 的 绝对 单位 来 作为 设计 方案 的 长 度 单位 。 


Flash 为 脚本 文档 提供 的 设置 仅 用 于 定义 脚本 自身 的 一 些 关 联 属性 ， 例 如 为 
“ActionScript 3.0 类 ”提供 了 【类 名 称 】 的 属性 设置 ， 而 为 “ActionScript 3.0 接口 ” 则 提 
供 了 【接口 名 称 】 的 属性 设置 。 这 些 设 置 受 限 于 篇 幅 ， x 
在 此 将 不 再 袭 述 。 


在 创建 动画 设计 方案 之 后 , 用 户 可 以 通过 四 种 方式 
来 编辑 文档 的 基本 设置 。 首 先 ， 用 户 可 以 执行 【修改 】 
1 [文档] 命令， 也 可 以 在 舞台 上 右 击 ， 执 行 【文档 】 
命令 : 还 可 以 在 【属性 】 检查 器 中 的 【属性 】 选 项 卡 中 《7 图 4-6。 【文档 设置】 对 活 棋 
单 击 【 编 辑 文 档 属性 】 国 : 或 按 下 Ce 组 合 键 , 均 可 
打开 【文档 设置】 对 话 框 。 

【文档 设置 】 对 话 框 的 绝 大 多 数 属性 与 新 建 动画 方案 时 类 似 ， 如 图 4.6 所 示 。 


在 该 对 话 框 中 ， 用 户 不 仅 可 以 设置 文档 的 尺寸 、 背 景 与 帧 频 ， 还 可 以 设置 文档 的 缩 
放 方 式 ， 如 表 4-4 所 示 。 
A 图 4-4 ,动画 设计 方案 文档 的 设置 
时 性 作用 


以 绝对 单位 英寸 为 单位 来 定义 动画 文档 的 尺 二 
到 (十进制 ) | 以 绝对 单位 英寸 为 单位 定义 动画 文档 的 尺寸 ， 进 制 规则 为 10 进 抽 


六 以 绝对 单位 派 卡 点 为 单位 定义 动画 文档 的 尺寸 
以 绝对 单位 毫米 为 单位 来 定义 动画 文档 的 尺寸 
三 以 相对 单位 像素 为 单位 来 定义 动画 文档 的 尺寸 
-EE 定义 动画 文档 的 宽度 
高 度 定义 动画 文档 的 高 度 
i 根据 舞台 中 实际 的 显示 对 象 内 容 尺寸 来 定义 舞台 大 小 ， 如 无 内 容 ， 
匹配 内 容 则 定义 舞台 宽度 和 高 度 均 为 1 像素 
缩放 内 容 在 更 改 舞 台 尺 寸 的 同时 根据 比例 缩放 舞台 内 的 所 有 显示 对 象 内 容 
缩放 缩放 显示 对 象 内 容 的 同时 也 对 锁定 层 和 隐藏 层 内 的 显示 对 象 内 容 进 


锁定 层 和 隐藏 层 行 同比 例 缩放 

| [es] ”| 在 缩放 舞台 时 向 右 下 方 扩 张 或 收缩 
| 国 | 在 缩放 舞台 时 向 底部 扩张 或 收缩 

| 国 ”| 在 缩放 舞台 时 向 左下 方 扩张 或 收缩 
| 加 | 在 缩放 舞台 时 向 右 侧 扩张 或 收缩 

锚 记 | 团 ”| 在 缩放 舞台 时 向 四 周 均匀 扩张 或 收缩 
| 图 | 在 缩放 舞台 时 向 左 侧 扩张 或 收缩 
在 缩放 舞台 时 向 右上 方 扩张 或 收缩 
在 缩放 舞台 时 向 顶部 扩张 或 收缩 

| 国 | 在 缩放 舞台 时 向 左上 方 扩张 或 收缩 
定义 动画 文档 的 背景 颜色 

定义 动画 播放 时 每 一 帧 在 屏幕 中 显示 时 所 占 的 时 间 , 默认 为 24 帧 每 
秒 
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如 用 户 只 需要 修改 Flash 动画 设计 方案 的 帧 频 、 尺 寸 
或 背景 颜色 ， 也 可 以 在 【属性 】 检 查 器 的 【属性 】 选 项 卡 
中 直接 修改 【FPS】 属 性 ( 帧 频 ) 、【 大 小 】 属 性 (尺寸 ) 
和 【舞台 】 属 性 〈 背 景 颜色 ) ， 如 图 4-7 所 示 。 


Flash CC 作为 Adobe 创意 云 套 件 的 一 个 重要 组 成 部 
分 ， 其 与 Adobe 创意 云 套 件 的 其 他 组 件 具 有 良好 的 兼容 一“ 
性 ,可 以 快速 导入 多 种 类 型 的 素材 文档 , 将 其 作为 资源 库 人 图 4-7 。 在 【属性 】 检查 器 
的 资源 元 素来 运作 。 中 编辑 文档 设置 
1， 导 入 一 般 素材 


一 般 素材 包括 普通 的 位 图 图 像 、Flash 输出 的 Shockwave 影片 、 音 频 等 ， 其 具体 包 
含 以 下 几 种 类 型 ， 如 表 4-5 所 示 。 


32 表 4-5 Flash CC 支持 的 位 图 图 像素 材 


类 型 


JPEG 图 像 


GIF 图 像 


扩展 名 
jpg 


说 明 
JPEG (Joint Photographic Experts Group， 联 合 图 像 专家 小 组 推荐 格式 ) 是 
第 一 个 国际 图 像 压缩 标准 。 JPEG 图 像 压 缩 算法 能 够 在 提供 良好 的 压缩 性 能 
的 同时 ， 具 有 比较 好 的 重建 质量 ， 被 广泛 应 用 于 图 像 、 视 频 处 理 领域 
GIF(Graphics Interchange Format， 图 像 互 换 格式 ) 是 CompuServe 公司 在 
1987 年 开发 的 图 像 文 件 格式 。GIF 文件 的 数据 ， 是 一 种 基于 LZW 算法 的 
连续 色调 的 无 损 压缩 格式 。 其 压缩 率 一 般 在 50% 左 右 


PNG 图 像 


SWF 影片 


png 


PNG (Portable Network Graphic Format， 可 移植 网 络 图 像 格 式 ) 是 一 种 位 图 
文件 (bitmap file) 存 储 格 式 ， 读 成 ping"。PNG 用 来 存储 灰 度 图 像 时 ， 灰 度 
图 像 的 深度 可 多 到 16 位 ， 存 储 彩 色 图 像 时 ， 彩 色 图 像 的 深度 可 多 到 48 位 ， 
并 且 还 可 存储 多 到 16 位 的 a 通道 数据 ， 其 目的 是 试图 替代 GIF 和 TIFF 文 
件 格式 ， 同 时 增加 一 些 GIF 文件 格式 所 不 具备 的 特性 

BMP (全 称 Bitmap) 是 Windows 操作 系统 中 的 标准 图 像 文件 格式 ， 其 可 以 
分 成 两 类 : 设备 相关 位 图 (DDB) 和 设备 无 关 位 图 (DIB)， 使 用 都 非常 广 
泛 。 它 采用 位 映射 存储 格式 ， 除 了 图 像 深 度 可 选 以 外 ， 不 采用 其 他 任何 压 
缩 ， 因 此 ，BMP 文件 所 占用 的 空间 很 大 。BMP 文件 的 图 像 深 度 可 选 lbit、 
4bit、8bit 及 24bit。BMP 文件 存储 数据 时 ， 图 像 的 扫描 方式 是 按 从 左 到 右 、 
从 下 到 上 的 顺序 。 由 于 BMP 文件 格式 是 Windows 环境 中 交换 与 图 有 关 的 
数据 的 一 种 标准 , 因此 在 Windows 环境 中 运行 的 图 形 图 像 软 件 都 支持 BMP 
图 像 格式 

Flash 编译 和 发 布 的 传统 影片 


AIFF (Audio Interchange File Format， 音 频 交 换文 件 格式 ) 是 一 种 文件 格式 


有 存储 的 数字 音频 (波形) 的 数据 ，AIFF 应 用 于 个 人 电脑 及 其 他 电子 音响 设 


MP3 声音 


Adobe 声 


音 文档 


备 以 存储 音乐 数据 。AIFF 支持 ACE2、ACE8、MAC3 和 MAC6 压缩 ， 支 
持 16 位 44.1kHz 立体 声 

WAV 为 微软 公司 开发 的 一 种 声音 文件 格式 ， 它 符合 RIFF(Resource 
Interchange File Format) 文 件 规范 ,用 于 保存 Windows 平台 的 音频 信息 资源 ， 
被 Windows 平台 及 其 应 用 程序 所 广泛 支持 

MP3 (Moving Picture Experts Group Audio Layer II， 第 三 代 动态 影像 专家 
压缩 标准 音频 ) 被 设计 用 来 大 幅度 地 降低 音频 数据 量 。 利 用 MPEG Audio 
Layer 3 的 技术 ， 将 音乐 以 1:10 甚至 1:12 的 压缩 率 ， 压 缩 成 容量 较 小 的 
文件 ， 而 对 于 大 多 数 用 户 来 说 重 放 的 音质 与 最 初 的 不 压缩 音频 相 比 没有 了 明 
显 的 下 降 

ASND (Adobe Sound Document，Adobe 声音 文档 ) 是 一 种 由 Adobe 
Soundbooth 或 Adobe Audition 软件 编码 的 声音 文档 


SunAU 


Sound 
Designer II 


Sun 公司 为 UNIX 系统 开发 的 一 种 音乐 格式 ， 和 WAV 非常 相像 ， 在 大 多 数 
的 音频 编辑 软件 中 也 都 支持 它们 这 几 种 常见 的 音乐 格式 。 在 JAVA 自 带 的 
类 库 中 能 得 到 播放 支持 

SD2 (Sound Designer I， 第 二 代 音 效 设计 师 ) 是 一 种 单 声 道 /立体 声音 频 文 
件 格 式 ， 最 初 由 Digidesign 开发 用 于 其 基于 Macintosh 的 录音 /编辑 产品 。 
它 是 单 声 道 音 效 设计 师 I 音 频 文件 格式 的 继 起 之 物 


Ogg Vorbis 


编码 


ogg 


flac 


Ogg(Ogg Vorbis) 是 一 种 新 的 音频 压缩 格式 , 类 似 于 MP3 等 的 音乐 格式 .Ogg 
是 完全 免费 、 开 放 和 没有 专利 限制 的 。Ogg 文件 格式 可 以 不 断 地 进行 大 小 
和 音质 的 改良 ， 而 不 影响 旧 有 的 编码 器 或 播放 器 

FLAC (Free Lossless Audio Codec, 自由 无 损 音频 编码 ) 其 特点 是 无 损 压 缩 。 
不 同 于 其 他 有 损 压 缩编 码 如 MP3 及 AAC， 它 不 会 破坏 任何 原 有 的 音频 资 
讯 ， 所 以 可 以 还 原音 乐 光盘 音质 。 现 在 它 已 被 很 多 软件 及 硬件 音频 产品 所 
支持 


Flash 在 处 理 以 上 这 些 类 型 的 素材 时 允许 设计 者 将 其 直接 导入 库 , 或 在 导入 库 的 同时 
也 导入 到 当前 舞台 中 。 

如 设计 者 仅 需 要 将 素材 导入 到 库 中 备用 ， 可 在 | 
Flash 中 执行 【文件 】| 【导入 】I 【导入 到 库 】 命令; 而 = 
如 果 设 计 者 需要 在 将 素材 导入 到 库 的 同时 还 直接 放 入 | 二 ee 
到 舞台 中 ， 则 可 以 执行 【文件 】|【 导 入 】|【 导 入 到 舞 | Sma 
台 ] 命令 。 在 选择 素材 文件 之 后 ， 即 可 完成 一 般 导 入 [eesti 


操作 。 2 
2. 导入 Photoshop 设计 方案 人 


区 图 呈 畦 并 为 ; 


Photoshop 设计 方案 是 一 种 由 多 个 图 层 构成 的 复杂 Onion gE 
图 像 文档 ， 其 可 以 内 婴 文 本 、 矢 量 图 形 、 位 图 以 及 这 ns 
些 元 素 的 滤 镜 效果 。Flash 在 处 理 Photoshop 设计 方案 [ese ee 
时 ， 可 以 直接 读 取 设 计 方案 内 的 各 种 信息 ， 并 进行 有 Ee 
针对 性 的 处 理 。 

在 选择 了 导入 Photoshop 设计 方案 的 方式 后 , Flash 人 了 图 4-8 .将 文档 导入 到 舞台 
CC 会 弹出 【将 文档 导入 到 舞台 】 或 【将 文档 导入 到 库 】 对 话 框 ， 允 许 用 户 设置 和 定义 
导入 的 具体 方式 ， 如 图 4-8 所 示 。 

在 【将 文档 导入 到 舞台 】 对 话 框 中 ， 用 户 可 以 设置 对 各 种 类 型 的 Photoshop 图 层 的 
处 理 方法 ， 如 表 4-6 所 示 。 
322 表 4-6 处理 Photoshop 图 层 的 设置 


汪 : 本 作 用 
将 Photoshop 图 层 平面 化 到 单个 | 将 Photoshop 文档 所 有 图 层 和 内 容 合并 为 单一 位 图 ,然后 导入 到 舞 
位 图 台 或 库 


保持 可 编辑 吕 入 和 | 保持 photoshop 位 图 图 层 、 矢 量 图 层 的 所 有 路 径 以 及 滤 镜 效果 
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图 层 转换 单个 而 化 位 图。 | 将 holoshep 信 风 网 居 和 矢量 风 居 的 中 和 ,让 做 等 合 开 为 位 罗 

可 纺 匈 文本 保留 Bhotoshop 文本 图 层 ， 将 其 转 护 为 Flash 文本 
文本 转换 | 矢量 轮廓 将 Photoshop 文本 图 层 中 的 文本 转换 为 矢量 路 径 

将 Photoshop 文本 图 层 打 散 为 位 图 图 像 

Flash 图 层 将 Photoshop 图 层 转换 为 Flash 图 层 ， 保 持 各 图 层 之 间 的 层 项 关系 
把 图 层 转 将 Photoshop 图 层 转换 为 单一 Flash 图 层 ， 每 个 Photoshop 图 层 均 
换 为 定义 为 该 Flash 图 层 中 的 一 个 元 件 

关键 由 将 Photoshop 图 层 内 的 内 容 合并 到 一 个 关键 由 中 
殉 砚 振 侣 大 水 根据 导入 的 Photoshop 设计 方案 尺 村 重新 更改 钴 澡 尺 村 


通常 情况 下 ， 如 设计 者 仅仅 需要 导入 Photoshop 设计 方案 作为 一 幅 图 像素 材 ， 则 可 
以 选择 【将 Photoshop 图 层 平 面 化 到 单个 位 图 】 选 项 ， 直 接 单 击 【确定 】，Flash 将 合并 
所 有 该 设计 方案 中 的 图 层 、 路 径 、 滤 镜 、 效 果 ， 使 之 成 为 一 整 幅 位 图 。 

而 如 果 设 计 者 需要 导入 所 有 Photoshop 设计 方案 中 的 元 素 , 在 Flash 中 以 元 件 的 方式 
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进行 编辑 修改 ， 则 可 以 设置 图 层 、 文 本 等 转换 处 理 方式 ， 将 Photoshop 设计 方案 中 的 元 
素 均 转换 为 Flash 元 件 来 使 用 ， 如 图 4-9 所 示 。 


Fl 文件 (F 编辑 (6 视图 (插入 () 修改 (M) 文本 命令 (Q ”控制 (0) 调度 [D) 窗口 (W) 帮助 (H) 


ED 
f 国志 1 国 - 心 . 让 [50% 


» controllers 
> 加 次 大 

四 hesder 
DY 


4-9 _ 导 入 外 部 Photoshop 设计 方案 


在 
意 


【匹配 码 台 大 小 】〗 选 项 仅 在 将 素材 导入 码 台 时 可 用 ， 在 将 素材 导入 库 时 为 不 可 用 状态 。 


3. 导入 lllustrator 矢量 图 形 


Illustrator 矢量 图 形 是 由 Adobe Illustrator 绘制 的 一 种 特殊 矢量 图 形 文档 ， 与 
Photoshop 设计 方案 、Flash 动画 设计 方案 文档 类 似 ，Illustrator 矢量 图 形 文档 也 属于 一 种 
由 若干 图 层 生 加 而 成 的 复杂 文档 ， 其 由 若干 矢量 图 形 、 矢 量 图 形 编组 、 文 本 对 象 、 位 图 
对 象 组 成 。 

Flash CC 内 置 了 完整 的 llustrator 素材 导入 支持 ， 人 允许 用 户 方便 地 将 Illustrator 格式 
的 文档 导入 到 库 或 导入 到 有 舞台， 其 基本 导入 方式 与 Photoshop 设计 方案 类 似 ， 其 区 别 在 
于 选择 文件 后 导入 时 的 处 理 方式 有 所 不 同 , 如 用 户 选择 导入 Illustrator 矢量 图 形 文档 , 则 
同样 会 显示 【将 文档 导入 到 库 】 或 【将 文档 导入 到 舞台 】 对 话 框 ， 如 图 4-10 所 示 。 

在 导入 Illustrator 矢量 图 形 时 ， 其 处 理 对 话 框 与 导入 Photoshop 设计 方案 的 对 话 框 区 
别 在 于 ， 其 允许 选择 Illustrator 矢量 图 形 中 的 画板 ,并 根据 画板 来 决定 导入 设置 。 除 此 之 
外 ， 在 导入 Illustrator 矢量 图 形 时 ，Flash 会 生成 “不 兼容 性 报告 ”， 告 知 设计 者 那些 
Illustrator 的 效果 或 图 形 元 素 不 被 Flash 支持 。 


4. 导入 多 媒体 


在 处 理 多 媒体 视频 时 , Flash 允许 用 户 导 入 多 种 途径 类 型 的 视频 , 根据 实际 的 视频 类 
型 来 处 理 Flash 文档 和 视频 的 关系 。 在 Flash 中 执行 【文件 】|【 导 入】| 【导入 视频 】 命 
令 ， 然 后 即 可 打开 【导入 视频 】 对 话 框 ， 如 图 4-11 所 示 。 


《了 图 4-10 ,将 文档 导入 到 库 和 图 4-1 ,导入 视频 


在 该 对 话 框 中 ， 用 户 可 以 选择 两 种 类 型 的 视频 ， 并 针对 这 两 种 视频 类 型 来 进行 下 一 
步 处 理 。 如 果 用 户 需 要 导入 的 是 本 地 视频 ， 则 可 以 选择 【在 您 的 计算 机 上 】 选 项 ， 然 后 
单 击 【文件 路 径 】 后 的 【浏览 〗】 按 钮 ， 选 择 该 视频 ， 然 后 再 选择 外 部 加 载 或 代入 到 SWF 


文件 中 等 两 种 方式 进行 导入 。 


如 果 用 户 需 要 导入 的 是 基于 互联 网 的 流 媒体 , 则 可 以 选择 [已 经 部 署 到 Web 服务 器 、 
Flash Video Streaming Service 或 Flash Media Server】 选 项 ， 并 输入 其 URL 地 址 ， 进 行 导 


入 工作 。 


【导入 视频 】 对 话 框 还 提供 了 启动 Adobe Media Encoder 视频 编 解码 工具 的 入 口 ， 单 


击 【 启 动 Adobe Media Encoder】 按 钮 ， 即 可 启动 该 工具 ， 快 速 处 型 


E 视 频 。 


(1) 加 载 外 部 视频 


如 果 设 计 者 以 加 载 外 部 视频 的 方式 导入 , 则 可 以 选择 【使 用 播放 组 件 加 载 外 部 视频 】 
选项 ， 单 击 【 下 一 步 】 按钮， 在 “ 设 定 外 观 ” 步 又 中 选择 视频 播放 控制 器 的 外 观 和 颜色 ， 


如 图 4-12 所 示 。 


然后 ， 即 可 单 击 【下 一 步 】， 完 成 视频 的 导入 ， 生 成 一 个 用 于 播放 视频 的 Flash 影 
片 ， 如 图 4-13 所 示 。 


生 图 4-12 ,选择 控制 器 外 观 和 颜色 三 图 4-13 ,完成 视频 导入 


(2) 骨 入 FLV 

如 果 设 计 者 需要 将 FLV 格式 的 视频 嵌入 到 Flash 影片 中 ， 则 可 以 选择 【在 SWF 中 
霸 入 FLV 并 在 时 间 轴 中 播放 】 选 项 ， 单 击 【下 一 步 】 按 钮 ， 如 图 4-14 所 示 。 

在 该 对 话 框 中 ， 用 户 可 以 设置 FLV 视频 的 相关 属性 ， 如 表 4-7 所 示 。 


S52 表 4-7_。 典 入 FLV 的 设置 


允许 根据 视频 的 长 度 扩展 Flash 影片 的 时 间 轴 ， 如 取消 此 项 选择 ， 则 
会 根据 现 有 时 间 轴 截断 视频 


如 果 需 要 ， 可 扩展 时 间 轴 


在 设置 完成 嵌入 的 属性 之 后 ， 即 可 单 击 【下 一 步 】 按 钮 ， 完 成 视频 导入 ， 如 图 4-15 


所 示 。 


和 图 4-14 嵌入 FLV 视频 设置 和 图 4-15 完成 嵌入 FLV 的 导入 


4.3 绘制 天 量 几何 图 形 


Flash 是 一 种 基于 矢量 图 形 的 动画 设计 软件 ,其 提供 了 多 种 矢量 图 形 绘制 工具 ， 允 许 
设计 者 绘制 线条 、 和 矩形 、 椭 圆 、 多 角形 以 及 多 边 形 等 多 种 几何 图 形 。 


1 


线条 是 构成 矢量 几何 图 形 的 基本 元 素 ， 在 
Flash 中 , 设计 者 可 以 使 用 其 内 置 的 工具 直接 绘 
制 直线 和 曲线 。 


1. 绘制 直线 线条 


Flash 提供 了 【线条 】 工 具 [ 罗 来 绘制 直线 
线条 。 在 【工具 箱 】 中 单 击 【线条 】 工 具 [ 四 |， 
然后 即 可 在 【属性 】 检 查 器 中 设置 线条 的 各 种 
属性 ， 在 舞台 中 绘制 直线 ， 如 图 4-16 所 示 。 和 图 4-16 ,使 用 【线条 】 工具 

【线条 】 工 具 [ 国 的 【属性 】 检 查 器 支持 用 
户 设置 多 种 线条 属性 ， 定 义 直 线 的 样式 ， 如 图 4-17 所 示 。 
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和 图 4-17 。【 线 条 】 工 具 的 【属性 】 检 查 器 
在 绘制 直线 时 ,用 户 可 以 在 【属性 】 检 查 器 中 快速 更 改 【 线 条 】 工 具 [E 罗 的 基本 属性 ， 


绘制 各 种 样式 的 线条 ， 其 设置 如 表 4-8 所 示 。 
2 表 4-8 。【 线 条 】 工 具 的 属性 


定义 线条 的 笔触 颜色 


笔触 定义 线条 的 宽度 

样式 定义 线条 的 基本 样式 ， 如 极 细 线 (忽略 宽度 )、 实 线 、 虚 线 、 点 状 线 、 锯 齿 线 、 
匀 点 刻 线 、 斑 马 线 等 

编辑 笔触 样式 [2] | 自 定义 个 性 化 的 线条 样式 


宽度 定义 线条 的 宽度 变化 规则 
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通常 情况 下 , Flash 预 置 的 7 种 线条 样式 已 经 可 以 满足 
设计 者 的 一 般 绘 制 需求 。 如 果 设 计 者 需要 绘制 更 加 丰富 的 
样式 线条 ， 则 可 以 在 【属性 】 检 查 器 中 单 击 【编辑 笔触 样 
式 】 按 钮 图 ， 打 开 【 笔 触 样式 】 对 话 框 ， 如 图 4-18 | 
所 示 。 

在 该 对 话 框 中 ， 各 选项 的 作用 如 表 4-9 所 示 。 
232 表 4-9 ,笔触 样式 的 设置 人 图 4-18 。 笔 和 样式 设置 


启用 该 复 选 杠 ， 可 以 放大 4 倍 来 预览 笔触 样式 


启用 该 复 选 杠 ， 可 以 使 笔触 的 拐角 变 得 尖锐 
选择 笔触 的 样式 。 不 同 的 笔触 样式 ， 其 下 方 的 设置 选项 也 会 发 生变 化 
根据 类 型 设置 来 更 改 笔触 的 其 他 进 阶 设置 


在 该 对 话 框 中 ， 用 户 可 以 通过 修改 笔触 样式 的 【类 型 】 选 项 ， 来 更 改 和 设置 其 下 方 
的 各 种 其 他 设置 。 


2. 绘制 任意 曲线 线条 


Flash 提供 了 【铅笔 】 工具 [加 来 绘制 任意 的 自由 曲 
线 线条 ， 这 些 线条 可 以 组 成 简单 的 任意 图 形 ， 或 元 件 的 
运动 路 径 等 。 【铅笔 】 工具 加 | 的 使 用 方法 与 【线条 】 工 
具 [ 加 类 似 ， 在 【工具 箱 】 中 选择 【 铝 笔 】 工具 国之 后 ， 
即 可 在 舞台 中 绘制 曲线 ， 如 图 4-19 所 示 。 

【铅笔 】 工具 [加 具备 三 种 平滑 模式 ， 在 【工具 箱 】 
底部 ， 设 计 者 可 以 单 击 【 伸 直 】 国 、【 平 滑 】 辆 或 【 黑 
水 】 国 按钮 ， 快 速 在 三 种 平滑 模式 中 切换 。 

(1) 伸 直 模式 
在 该 模式 下 ，Flash 可 以 自动 规则 所 绘制 的 线条 ， “人 图 4-19 。 使 用 【铅笔 ] 工具 
使 其 更 贴近 规则 形状 。 诸 如 绘制 直线 、 椭 圆 、 算 形 、 多 

边 形 等 的 大 致 轮廓 ，Flash 会 自动 将 其 转换 为 对 应 的 图 形 ， 如 图 4-20 所 示 。 


= 


(2) 平滑 模式 


在 该 模式 下 ，Flash 会 自动 根据 【属性 】 检 查 器 中 设置 的 【平滑 】 属 性 来 定义 曲线 的 


Deos | 


由 率 ， 将 绘制 的 曲线 平滑 化 ， 使 线条 或 封闭 图 形 接 近 于 圆 弧 或 椭圆 ， 如 图 4-21 所 示 。 


[wo% | 


所 图 4-20 。 绘 制 伸 直 线条 和 图 4-21 ,绘制 平滑 线条 
(3) 墨水 模式 


在 该 模式 下 ，Flash 会 完全 保留 设计 者 徒手 绘制 的 线条 内 容 , 不 加 任何 更 改 , 使 之 更 


接近 设计 者 手绘 的 效果 。 


Flash CC 通过 【和 矩形 】 工具 贺 、【 基 本 算 
形 】 工 具 贺 来 绘制 各 种 矩形 和 圆 角 矩形 。 其 区 
别 在 于 ， 通 过 【和 矩形】 工具 加 绘制 的 矩形 会 被 
打 散 为 由 笔触 和 填充 构成 的 普通 矢量 形状 元 
素 ， 而 通过 【基本 矩形 】 工具 国 绘 制 的 算 形 则 
会 被 保留 为 一 个 矩形 图 形 对 象 ， 并 完整 地 保留 
可 编辑 性 。 

在 【工具 箱 】 中 选择 【和 矩形 】 工具 贺 或 【 基 
本 和 矩形】 工具 贺 之后， 设计 者 可 以 在 【属性 】 
检查 器 中 设置 矩形 图 形 的 填充 和 笔触 、 圆 角 弧 
度 等 属性 , 然后 再 在 舞台 中 拖 忠 鼠标 , Flash 会 
将 鼠标 按 下 的 点 和 鼠标 弹 起 的 点 分 别 作为 矩形 
对 角 线 的 起 点 和 终点 ,生成 矩形 形状 , 如 图 4-22 
所 示 。 


| 师 族 


和 图 4-22 绘制 基本 矩形 形状 


【和 矩形 】 工 具 加 和 【基本 算 形 】 工具 回 都 是 由 矢量 笔触 和 填充 构成 ， 因 此 其 【属性 】 


检查 器 中 完整 地 包含 了 【线条 】 工 具 [ 因 的 所 有 矢量 笔触 属性 ， 除 此 之 外 ， 还 增加 了 一 部 

分 新 的 属性 ， 如 表 4-10 所 示 。 

5 表 4-10, 绘制 矩形 的 属性 
选 项 卡 | 属性 
填充 和 笔触 | 项 。 | 单 击 其 右 侧 的 【颜色 拾取 器 】 技 包 晴晴 ， 可 更 改 绘制 的 算 形 填充 颅 色 

| 。 | 定义 逢 形 左 上 角 的 贺 角 弧度 


定义 矩形 左下 角 的 圆 角 弧度 ， 仅 当 锁定 矩形 四 角 圆 角 弧 度 的 按钮 处 于 
非 激 活 状 态 ( 刻 ) 时 可 用 


定义 矩形 右上 角 的 圆 角 弧度 ， 仅 当 锁 定 矩 形 四 角 圆 角 弧度 的 按钮 处 于 
非 激活 状态 〈 侣 ) 时 可 用 


定义 矩形 右 下 角 的 圆 角 弧度 ， 仅 当 锁 定 矩 形 四 角 圆 角 弧 度 的 按钮 处 于 
非 激活 状态 〈 锚 ) 时 可 用 


锁定 矩形 四 个 角 的 圆 角 弧度 ， 使 之 为 一 个 统一 的 值 
重 置 设计 者 白 定义 的 圆 角 弧度 为 默认 弧度 ， 即 四 个 角 弧度 均 为 0 


如 果 设 计 者 使 用 【和 矩形 】 工 具 国 | 来 绘制 第 形 , 则 在 绘制 完成 矩形 之 后 , 只 能 通过 【 选 
择 】 工 具 轿 选 该 矩形 ， 在 【属性 】 检 查 器 的 【位 置 和 大 小 】 选 项 卡 与 【填充 和 笔触 】 选 
项 卡 来 对 其 进行 编辑 操作 ， 修 改 其 位 置 、 尺 寸 、 填 充 和 笔触 等 属性 。 

【基本 拢 形 】 工 具 加 绘制 的 矩形 可 编辑 性 更 强 ， 则 在 绘制 完成 矩形 之 后 ， 可 以 通过 
【选择 】 工 具 因 直接 单 击 选择 该 矩形 ， 然 后 在 【属性 】 检 查 器 中 通过 【位 置 和 大 小 】 选 
项 卡 、【 填 充 和 笔触 】 选 项 卡 和 【和 矩形 选项 】 选 项 卡 来 对 其 进行 修改 ， 除 了 编辑 位 置 、 
尺寸 、 填 充 、 笔 触 等 属性 外 ， 还 可 以 修改 其 圆 角 弧度 。 


与 绘制 矩形 类 似 ，Flash 提供 了 【椭圆 】 工具 图 
和 【基本 椭圆 】 工 具 图 | 等 两 种 工具 来 绘制 普通 矢量 
椭圆 和 基于 对 象 的 矢量 椭圆 对 象 。 
在 【工具 箱 】 中 选择 【椭圆 】 工 具 区 ] 或 【基本 
椭圆 】 工 具 图 ， 然 后 即 可 在 【属性 】 检 查 器 中 设置 
其 属性 ,在 有 舞台 中 绘制 椭圆 形状 或 基于 对 象 的 椭圆 对 
象 ， 如 图 4-23 所 示 。 

与 矩形 形状 类 似 , 在 绘制 椭圆 形状 时 , 用 户 也 可 一 
以 在 【属性 】 检 查 器 中 设置 其 【填充 和 笔触 】 属 性 ， 和 图 4-23 绘制 椭圆 形状 
除 此 之 外 ， 还 可 以 额外 设置 其 【椭圆 选项 】 属 性 ， 其 主要 包含 以 下 几 种 属性 ， 如 表 4-11 
所 示 。 


一 


32 表 4-11 。 椭圆 选项 的 属性 


开始 角度 | 定义 椭圆 形状 或 基于 对 象 的 椭圆 形状 的 圆 弧 边 起 始点 角度 ， 用 于 绘制 扇形 


_ 结 束 角度 | 定义 椭圆 形状 或 基于 对 象 的 椭圆 形状 的 圆 弧 边 结束 点 角度 ， 用 于 绘制 扇形 _ 


指定 入 加 的 嘱 友 是 于 闭合 -如果 指定 了 内 径 ， 则 包含 多 个 路 径 ， 如 果 指 定 了 一 和 开放 的 
合 路 径 】 选 项 


| 路 径 ， 但 未 对 生成 的 形状 应 用 任何 填充 ， 则 仅 绘制 笔触 
如 果 设 计 者 采用 【基本 椭圆 】 工 具 图 ] 来 绘制 椭圆 ， 则 在 绘制 完成 基于 对 象 的 椭圆 形 


内 径 定义 椭圆 形状 或 基于 对 象 的 栖 圆 形状 的 同心 圆 半径， 用 于 绘制 辕 环 或 房 环 ， 
闭合 路 径 
重 罗 为 默认 选项 ， 即 定义 【开始 角度 下 【结束 角度 】 和 下 内 径 】 值 均 为 0， 并 选中 【 闭 ， 
状 之 后 ， 仍 然 可 以 通过 【选择 】 工 具 国 | 直接 单 击 选择 该 形状 ， 修 改 其 【椭圆 选项 】 相 关 
属性 。 


除了 绘制 矩形 和 椭圆 形 之 外 ，Flash CC 还 提供 了 【多 角 星 形 】 工 具 图 ， 以 绘制 多 边 
形 、 星 形 等 复杂 的 几何 图 形 。 

在 【工具 箱 】 中 选择 【多 角 星 形 】 工 具 图 ， 在 【属性 】 检 查 器 中 设置 【工具 设置 】 
属性 ， 然 后 即 可 在 舞台 中 绘制 多 边 形 或 星 形 ， 如 图 4-24 所 示 。 

【多 角 星 形 】 工 具 图 的 【属性 】 检 查 器 除了 【填充 和 笔触 】 选 项 之 外 ,还 提供 了 【 工 
具 设 置 】 选 项 卡 ， 其 包含 一 个 选项 按钮 ， 单 击 该 按钮 之 后 ， 可 打开 【工具 设置 】 对 话 框 ， 
以 定义 多 角形 或 多 边 形 的 属性 ， 如 图 4-25 所 示 。 


在 了 图 4-24 绘制 多 边 形 和 图 4-25 【工具 设置 】 对 话 框 
在 该 对 话 框 中 ， 用 户 可 以 对 绘制 的 多 边 形 或 星 形 进行 具体 的 设置 ， 如 表 4-12 所 示 。 


网 
页 
设 
计 
与 
网 
站 
建 
设 
Q 
© 
中 
文 
版 
标 
准 
教 
程 


3 表 4-12 多 角 星 形 的 工具 设置 


默认 值 ， 绘 制 一 个 多 边 形 〈 形 状 的 边 数 与 下 方 【 边 数 】 值 相等 ) 
绘制 一 个 星 形 〈 形 状 的 角 数 与 下 方 【 边 数 】 值 相等 ， 但 边 数 为 下 方 【 边 数 】 值 的 
两 倍 ) 

定义 多 边 形 的 边 数 或 星 形 的 角 数 

指 星 形 多 边 形 角 的 度数 ， 范 围 为 0~1 之 间 的 小 数 ， 数 字 越 大 则 角度 越 大 


4.4 ”编辑 颜色 
颜色 是 构成 矢量 形状 的 重要 样式 。Flash 提供 了 多 种 方式 来 识 取 和 定义 颜色 , 包括 调 


色 板 、【 颜 色 】 面 板 等 。 在 定义 颜色 之 后 ， 设 计 者 即 可 通过 【墨水 瓶 】 工 具 区 和 【颜料 
桶 】 工 具 贺 将 其 应 用 到 矢量 图 形 中 。 


样式 


边 数 


9 -Aes 调 色 板 :， 

调 色 板 是 Flash 中 最 基本 的 色彩 编辑 和 识 取 工具 ， 其 可 以 为 设计 者 提供 包含 Alpha 
通道 的 218 种 基本 颜色 和 7 种 常用 的 渐变 色 ， 并 允许 用 户 自 行 定义 更 多 基于 RGB 色 系 
的 颜色 。 


调 色 板 可 以 应 用 于 几乎 所 有 Flash 软件 的 颜色 识 取 和 调制 中 ， 诸 如 舞台 、 各 种 文本 、 
笔触 、 填 充 等 。 在 为 这 些 元 素 进行 调制 颜色 时 ， 只 需要 单 击 【 颜 色 拾 取 器 】 按 钮 ， 然 后 
即 可 调 出 调 色 板 ， 其 主要 由 7 个 部 分 组 成 ， 如 图 4-26 所 示 。 
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4-26_ 调 色 板 的 组 成 部 分 


组 成 Flash 调 色 板 的 7 个 部 分 主要 包括 1- 颜 色 编 辑 器 、2-Alpha 通道 编辑 器 、3-【 清 
除 颜 色 】 按 钮 、4-【 颜 色 选 择 器 】 按 钮 、5- 基 本 纯色 、6- 基 本 渐变 色 以 及 7-216 安全 色 等 。 


1. 颜色 编辑 器 


颜色 编辑 器 主要 包括 两 个 部 分 ， 即 左 侧 的 【色彩 预览 】， 以 及 右 侧 的 【颜色 代码 】 
文本 框 等 。 其 中 【色彩 预览 】 显 示 的 是 当前 所 选择 颜色 的 预览 效果 ， 而 【颜色 代码 】 文 
本 框 将 显示 当前 所 选择 颜色 的 代码 ， 其 由 井 号 “#” 和 6 位 十 六 进 制 数字 组 成 。 

当 设 计 者 通过 调 色 板 的 色彩 识 取 功能 在 Flash 中 识 取 颜色 时 ， 色 彩 预 览 会 显示 当前 
识 取 颜 色 的 效果 ， 而 【颜色 代码 】 文 本 框 会 显示 该 颜色 的 代码 。 设 计 者 可 以 直接 单 击 【 颜 
色 代 码 】 文 本 框 ， 在 其 中 输入 某 个 颜色 的 代码 ， 将 其 作为 当前 选择 的 颜色 ， 应 用 到 调 色 
板 中 。 


2. Alpha 通道 编辑 器 

Alpha 通道 编辑 器 的 作用 是 定义 当前 所 选 纯色 的 透明 度 ， 其 值 为 百分比 值 ， 当 其 值 
为 “100%” 时 ， 表 示 完 全 不 透明 ， 而 当 其 值 为 “0%” 时 ， 表 示 完 全 透明 。 

3.【 清 除 颜 色 】 按 钮 


【清除 颜色 按钮 回 的 作用 是 清除 设计 者 当前 选择 的 颜色 , 设置 对 应 的 Flash 元 素 ( 如 


4.【 颜 色 选 择 器 】 按 钮 


【颜色 选择 器 按钮 圈 可 以 帮助 设计 者 调 出 
【颜色 选择 器 】 对 话 框 ， 帮 助 用 户 识 取 和 选择 更 
多 丰富 的 颜色 。 在 单 击 该 按钮 之 后 ， 即 可 打开 
【颜色 选择 器 】 对 话 框 ， 如 图 4-27 所 示 。 

在 该 对 话 框 中 ， 用 户 可 以 在 左 侧 的 色 度 识 
取 区 域 选择 颜色 的 基本 色 度 ， 然 后 在 中 间 的 明 
度 识 取 区 域 选 择 明度 ， 定 义 颜 色 ， 其 设置 项 目 人 图 4-27。[ 颜 色 选 择 器 】 对 话 框 
如 表 4-13 所 示 。 

2 表 4-13。 颜色 选取 器 的 设置 项 目 


置 
根据 色相 来 决定 颜色 选取 的 方式 
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续 表 


根据 饱和 度 来 决定 颜色 选取 方式 


根据 党 度 来 决定 颜色 选取 的 方式 


以 红色 为 基准 色 来 取 色 


以 绿色 为 基准 色 来 取 色 


以 蓝 色 为 基准 色 来 取 色 


直接 通过 颜色 代码 来 取 色 

当然 ， 用户 也 可 以 直接 在 井 号 “#” 后 输入 颜色 的 代码 以 识 取 颜色 ， 单 击 【 确 定 】 按 
钮 完成 颜色 的 调制 。 

5. 基本 纯色 

基本 纯色 区 域 提供 了 12 种 基本 的 颜色 ， 包 括 从 黑色 〈 因 00000) 到 白色 (三 FFFFF) 
的 6 种 灰 度 颜色 、 红 (#FF0000)、 绿 (#HOOFF00)、 蓝 (#0000FF) 三 原色 和 黄色 (#IFFF00)、 
青色 (#00FFFF)》 以 及 品 红 (十 F00FF) 等 (黄色 、 青 色 、 品 红 与 黑色 构成 CMYK 四 分 
色 ) 。 设 计 者 可 以 从 基本 纯色 区 域 快速 选取 这 些 颜 色 ， 将 其 应 用 到 图 形 中 。 

6. 基本 渐变 色 

基本 渐变 色 区 域 提供 了 7 种 简单 的 渐变 色 ， 用 于 快速 渐变 色 的 选取 与 应 用 。 

7. 216 安全 色 


早期 的 Flash 仅 用 于 网 页 动画 的 设计 ， 后 续 的 版 本 也 保留 了 很 多 网 页 设计 的 特 
调 色 板 中 的 216 安全 色 快 速 选择 也 正 是 由 此 继承 而 来 。 

216 安全 色 又 被 称 作 216 网 页 安全 颜色 ， 其 指 在 不 同 硬件 环境 、 不 同 操作 系统 、 不 
同 浏览 器 中 都 能 够 正常 显示 的 颜色 集合 ， 这 些 颜 色 在 任何 终端 浏览 用 户 显示 设备 上 的 显 
示 效 果 都 是 相同 的 。 所 以 使 用 216 网 页 安全 颜色 进行 网 页 配色 可 以 避免 原 有 的 颜色 失真 


问题 。 
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【颜色 】 面 板 是 对 调 色 板 的 进 阶 升级 , 其 可 以 为 设计 者 提供 更 加 丰富 的 色彩 以 及 颜色 
类 型 ， 可 为 矢量 笔触 以 及 矢量 填充 应 用 更 多 的 
颜色 内 容 。 在 Flash 中 执行 【窗口 】| 【颜色 】 
命令 , 或 在 压缩 面板 栏 中 单 击 【 颜 色 】 按钮 加 |， 


然后 即 可 打开 该 面板 ， 如 图 4-28 所 示 。 == 颜 外 选项 
【颜色 】 面 板 可 以 定义 矢量 笔触 和 矢量 填充 
的 颜色 ， 其 可 分 为 两 个 部 分 ， 一 部 分 为 【颜色 ”颜色 类 型 


类 型 】 设 置 ， 另 一 部 分 则 是 根据 填充 的 类 型 而 
定义 的 【颜色 选项 】。 

在 【颜色 类 型 】 设 置 中 ， 定 义 了 【颜色 】 
面板 向 矢量 笔触 和 矢量 填充 应 用 颜色 的 方式 ， [了 图 4-28 【颜色 】 面 板 
如 表 4-14 所 示 。 

3 表 4-14。 颜色 类 型 设置 
设置 作 用 


笔触 颜色 殉 | | 单 击 此 按钮 可 使 【颜色 】 面 板 中 定义 的 颜色 应 用 到 当前 矢量 笔触 
填充 颅 凶 岛 | | 单 击 此 按钮 可 使 【颜色 】 面 板 中 定义 的 颜色 应 用 到 当前 矢量 填充 


黑白 吊 快速 将 黑色 应 用 到 笔触 颜色 ， 将 白色 应 用 到 填充 颜色 
无 色 加 快速 清除 当前 笔触 颜色 或 填充 颜色 
交换 颜色 项 将 当前 定义 的 笔触 颜色 和 填充 颜色 快速 交换 

清除 当前 笔触 颜色 或 填充 颜色 


为 当前 笔触 颜色 或 填充 颜色 应 用 纯色 

类 为 当前 笔 航 磊 色 或 项 充 闫 色 应 用 线性 渐变 ， 即 直线 延 作 的 浙 变 效果 

型 为 当前 笔触 颜色 或 填充 颜色 应 用 径 向 渐变 ， 即 由 中 心 向 四 周 发 散 的 渐变 效果 
载 入 一 由 位 图 ， 以 该 位 图 填充 笔 角 或 填充 区 域 


【颜色 选项 】 区 域 会 根据 设计 者 选择 的 【颜色 类 型 】 选项 来 自动 更 新 设置 选项 ， 变 换 


为 空 。 
1. 纯色 的 颜色 选项 


当 设计 者 为 笔触 或 填充 选择 “纯色 ”的 颜色 选项 之 后 ， 上 2 
【颜色 选项 ] 将 显示 为 一 个 颜色 拾取 器 , 允许 设计 者 通过 [ 色 三 ”| 
相 】、【 饱 和 度 】、【 亮 度 】、【 红 】、【 绿 】 和 【 蓝 】 

等 取 色 基准 来 识 取 颜色 ， 如 图 4-29 所 示 。 和 图 4-29 ,纯色 的 颜色 选项 

“纯色 ”的 【颜色 选项 】 与 【颜色 选取 器 】 对 话 框 类 似 ， 其 区 别 在 于 提供 了 【A】 选 
项 来 定义 Alpha 通道 ， 同 时 在 下 方 提供 了 一 个 颜色 预览 区 域 ， 该 区 域 上 半 部 分 为 当前 调 
制 的 颜色 ， 下 半 部 分 为 当前 已 选择 的 颜色 。 


2. 线性 渐变 和 径 向 渐变 的 颜色 选项 


当 设计 者 选择 “线性 渐变 ”或 “ 径 向 渐变 ”等 两 种 
渐变 的 【颜色 类 型 】 后 ，【 颜 色 选 项 】 将 显示 用 于 渐变 
的 颜色 选项 。 

其 在 “纯色 ”的 颜色 选项 基础 上 增加 了 设置 渐变 的 
【 流 】 选项 ,定义 渐变 的 方式 , 另外 提供 了 【线性 RGB】 上 
选项 ,定义 以 线性 计算 的 渐变 色彩 变换 方式 ,同时 提供 
了 渐变 色 编辑 功能 , 允许 设计 者 自行 为 浙 变色 添加 取 色 人 图 和 20。 用 于 渐变 的 颇 色 选项 
点 ， 定 义 取 色 点 的 颜色 ， 如 图 4-30 所 示 。 

3， 位 图 填充 的 颜色 选项 


当 设 计 者 选择 “位 图 填充 ”的 【颜色 类 型 】 之 后 ，Flash 将 会 弹出 一 个 【导入 到 库 】 
对 话 框 ， 允 许 设计 者 从 本 地 计算 机 打开 一 个 位 图 文件 ， 将 其 导入 到 库 。 然 后 ，【 颜 色 选 
项 】 区 域 将 显示 该 位 图 的 预览 效果 。 


| 
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【墨水 瓶 ] 工 具 是 一 种 用 于 为 矢量 图 形 添加 
笔触 的 实用 工具 ， 其 作用 是 自动 判断 当前 用 户 
选择 的 填充 区 域 ， 为 该 填充 区 域 添加 笔触 或 更 
改 当 前 填充 区 域 的 笔触 。 在 【工具 箱 】 中 选择 
【墨水 瓶 】 工 具 贺 ， 然 后 即 可 在 【属性 】 检 查 
器 中 设置 其 笔触 属性 , 单 击 舞 台中 的 填充 区 域 ， 
为 该 区 域 添加 或 更 改 其 笔触 ， 如 图 4-31 所 示 。 

【墨水 瓶 】 工 具 加 的 【 届 性 】 检 查 器 设置 
与 【线条 】 工具 国 、【 铝 笔 ] 工具 国 相 同 ， 出 
于 篇 幅 的 限制 ， 在 此 将 不 再 袭 述 。 
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【颜料 桶 】 工 具 轿 | 的 作用 与 【墨水 瓶 】 工 
具 加 | 正好 相反 , 【墨水 瓶 】 工具 加 | 用 于 为 矢量 
填充 添加 笔触 ， 而 【颜料 桶 】 工 具 轿 | 则 用 于 为 
矢量 笔触 添加 或 修改 其 矢量 填充 。 

在 【工具 箱 】 中 单 击 【颜料 桶 】 工 具 贺 |, 
然后 即 可 在 【属性 】 检查 器 中 通过 【填充 颜色 】 
戎 的 颜色 拾取 器 ， 或 【颜色 】 面 板 等 方式 来 设 上 
和 置 填充 颜色 ， 将 其 应 用 到 绘制 的 矢量 图 形 中 ， 
如 图 4-32 所 示 。 人 图 4-32。 用 【颜料 桶 】 工 具 填充 颜色 

Flash 在 【工具 箱 】 底 部 为 【颜料 桶 】 工 具 贺 提供 了 几 种 填充 方式 的 设置 , 如 表 4-15 


所 示 。 
3 表 4-15, 【颜料 桶 】 工 具 的 填充 方式 设置 


只 有 区 域 完全 闭合 时 才能 填充 
系统 忽略 一 些小 的 缺口 进行 填充 

系统 将 忽略 一 些 中 等 空 阶 ， 然 后 进行 填充 

系统 可 以 忽略 一 些 较 大 的 空 阶 ， 并 对 其 进行 填充 
对 填充 颜色 进行 锁定 ， 使 其 无 法 被 修改 


4.5 ”处 理 矢量 文本 


文本 是 构成 网 页 的 重要 元 素 ， 早 期 的 Flash 通过 内 嵌 的 基本 文本 引擎 来 提供 动画 中 
的 文本 支持 ， 从 操作 系统 中 调 取 字 体 来 显示 文字 内 容 。 如 果 设 计 者 采用 了 非 操 作 系统 预 
安装 的 字体 ， 则 必须 将 文本 打 散 为 矢量 形状 来 实现 文本 的 显示 。 

在 Flash CS5 之 后 , Adobe 通过 全 新 的 TLF 文本 布局 框架 技术 来 嵌入 Flash 文本 , 使 
得 Flash 影片 能 够 自行 嵌入 字体 , 以 更 丰富 的 方式 呈现 文本 内 容 。 在 Flash CS6 版 本 之 后 ， 
Adobe 据 弃 了 传统 的 Flash 基本 文本 引擎 ， 使 TLF 文本 布局 框架 技术 成 为 了 Flash 默认 
的 文本 引擎 ， 帮 助 Flash 以 更 高 效 的 方式 来 处 理 文本 内 容 。 


Flash 支持 三 种 类 型 的 文本 内 容 ， 即 静态 文本 、 动 态 文本 以 及 输入 文本 。 这 三 种 文本 
分 别 被 应 用 到 各 种 动画 场景 中 。 

口 静态 文本 

静态 文本 是 Flash 中 最 基本 的 文本 类 型 ， 其 特点 是 在 创建 时 无 法 定义 一 个 固定 的 尺 
寸 , 文本 的 尺寸 会 根据 内 容 的 数量 自行 扩展 或 收缩 。 

需要 注意 的 是 ， 静 态 文 本 是 真正 “静态 ”的 文本 ， 其 更 像 是 可 以 更 改 内 容 的 矢量 图 
形 ，Flash 内 媒 的 ActionScript 3.0 脚本 语言 通常 情况 下 是 无 法 直接 对 静态 文本 进行 修改 
的 。 静 态 文本 也 无 法 被 实例 化 为 ActionScript 对 象 。 

口 动态 文本 

动态 文本 可 以 显示 动态 更 新 的 文本 ， 其 与 静态 文本 的 区 别 在 于 在 创建 时 就 允许 设计 
者 为 其 定义 一 个 固定 的 尺寸 ， 无 论 其 包含 多 少 内 容 ， 其 固定 尺寸 都 不 会 改变 。 

同时 ， 动 态 文本 可 被 实例 化 为 ActionScript 对 象 ， 使 得 设计 者 可 以 通过 ActionScript 
3.0 脚本 语言 动态 地 修改 其 文本 内 容 。 这 一 特性 使 得 在 一 些 Flash 应 用 程序 中 ， 设 计 者 更 
愿意 使 用 这 种 文本 类 型 来 呈现 文本 内 容 。 

口 输入 文本 

输入 文本 是 动态 文本 的 扩展 形式 。 在 Flash 影片 中 ， 动 态 文本 的 显示 内 容 只 能 
ActionScript 3.0 脚本 程序 修改 ， 无 法 由 用 户 直接 输入 内 容 来 修改 。 输 入 文本 则 更 类 似 网 
页 中 的 文本 框 ， 在 Flash 影片 发 布 后 ， 开 发 者 可 以 直接 单 击 输入 文本 ， 在 其 内 部 输入 文 
本 内 容 。 


第 
4 
章 
绘 
制 
动 
回 
元 
素 


污 栖 革 司 灯 手 沪 习习 


Q 
OO 
中 
广 
版 


Flash 提供 了 【文本 】 工 具 国 来 创建 动画 文本 ， 其 使 用 方式 与 矢量 图 形 工具 类 似 ， 
在 【工具 箱 】 中 单 击 【 文 本 】 工 具 国 ， 然 后 即 可 在 【属性 】 检 查 器 中 设置 文本 的 属性 ， 
在 舞台 中 指定 位 置 单 击 鼠 标 ， 创 建文 本 并 输入 内 容 ， 如 图 4-33 所 示 。 

在 创建 文本 时 ，【 文 本 】 工 具 国 的 【属性 】 检 查 器 主要 包括 三 种 设置 ， 即 该 工具 自 
身 的 设置 、【 字 符 】 设 置 以 及 【段落 】 设 置 ， 分 别 定义 文本 的 类 型 、 文 本 中 的 字符 样式 
和 段落 排版 信息 等 。 


1. 文本 工具 设置 
【文本 】 工 具 国 设置 主要 用 于 定义 所 创建 文本 的 类 型 , 以 及 文本 流 的 方向 , 如 图 4-34 


nA 


和 图 4-33 创建 Flash 文本 和 图 4-34 【文本 】 工 具 设置 


在 创建 文本 时 ， 用 户 可 以 通过 【文本 】 工 具 国 设置 文本 的 两 种 基本 属性 ， 如 表 4-16 
所 示 。 
2 表 4-16,【 文 本】 工具 设置 选项 


通过 文本 流向 属性 ， 用 户 可 以 方便 地 创建 基于 东亚 语言 习惯 的 动画 文本 ， 例 如 古典 
中 文 、 日 文风 格 的 文本 等 。 


2. 字符 设置 


字符 设置 面向 的 是 文本 中 的 各 种 字符 ， 其 可 
以 定义 单个 字符 的 样式 ， 将 其 应 用 到 即将 创建 的 
文本 中 ， 或 更 改 已 选择 的 文本 ， 如 图 4-35 所 示 。 
在 【字符 】 的 选项 卡 中 ， 设 计 者 可 以 设置 字 
符 的 【系列 】、【 样 式 】、【 大 小 】、【 字 母 间 


距 】 等 一 系列 属性 ， 如 表 4-17 所 示 。 人 了 图 4-35 ,字符 设置 属性 
S55 表 4-17_ 字符 设置 的 属性 
属 性 1 


系列 为 文本 设置 字体 


样式 设置 字体 的 样式 ， 如 斜体 、 加 粗 等 ， 仅 对 特定 的 字体 有 效 


将 现 操作 系统 安装 的 字体 嵌入 到 Flash 影片 中 ， 以 维持 影片 中 文本 在 其 他 用 户 的 


国人 | 计算 机 中 的 效果 与 当前 设计 者 的 计算 机 效果 一 致 

天 下 定义 字 休 的 尺 二 

字 侠 间 看 定义 字 坪 文字 中 每 个 字 全 之 间 的 站 

颜色 定义 字符 的 前 景色 

自动 调整 字 好 ”| 对 字母 文字 调整 字 世 使 之 更 加 均衡 《在 使 用 设备 字 休 消除 饮 具 模式 下 不 可 用 ) 
消除 圳 庆 运用 数学 算法 消除 字体 疯 锯 次 ， 使 之 更 加 苹 和 和 

画 将 字符 设 为 可 选 ， 在 影片 发 布 后 仍然 允许 用 户 在 播放 器 中 选择 这 些 文本 


名 将 文本 呈现 为 HTML 代码 ， 允 许 发 布 后 的 复制 操作 


在 发 布 影 片 后 允许 在 文本 周边 显示 边框 


定义 所 选 字符 以 上 标的 方式 显示 

加 定义 所 选 字符 以 下 标的 方式 显示 
需要 注意 的 是 ， 仅 当 文本 类 型 为 静态 文本 或 动态 
一 文本 时 ， 才 允许 在 发 布 影片 后 选择 这 些 文本 ， 仅 当 文 
Se 本 类 型 为 动态 文本 或 输入 文本 时 ， 才 允许 将 文本 呈现 


本 本 | 为 HTML 代码 和 显示 周边 边框。 


3. 段落 设置 


发 了 图 4-36。 段 落 设置 【段落 】 选 项 卡 的 作用 是 定义 由 字符 组 成 的 段落 集 
合 的 相关 属性 ， 其 更 注重 字符 之 间 的 关系 ， 如 图 4-36 所 示 。 

在 【段落 】 的 选项 卡 中 ， 设 计 者 可 以 定义 以 下 几 种 属性 ， 如 表 4-18 所 示 。 
3 表 4-18。 段落 设置 的 属性 


定义 文本 居 左 对 齐 
定义 文本 居中 对 齐 
定义 文本 居 右 对 齐 
定义 文本 两 端 对 齐 
段 首 缩 进 晓 定义 段落 第 一 行内 容 向 右 缩 进 的 距离 
间距 三 定义 段落 行 之 间 的 距离 
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续 表 


边 距 绰 定义 段落 与 文本 区 域 左 侧 的 距离 
如 定义 段落 与 文本 区 域 右 侧 的 距离 
单行 定义 文本 仅 以 单行 的 方式 显示 (对 静态 文本 无 效 ) 
多 行 定义 文本 可 以 多 行 的 方式 显示 (对 静态 文本 无 效 ) 
行为 | 多 行 不 换行 定义 文本 以 多 行 的 方式 显示 ， 但 不 换行 《对 静态 文本 无 效 ) 


仅 对 输入 文本 有 效 ) 


定义 文本 以 密码 域 的 方式 显示 (所 有 字符 被 星 号 “*” 或 圆 点 “e” 显 示 ， 


通过 段落 设置 ， 设 计 者 可 以 方便 地 定义 字符 集合 的 各 种 效果 ， 使 文本 内 容 更 符合 普 


通 Web 文本 的 显示 习惯 。 


6_ 课 党 练习 : 绘制 矢量 Logo 


Logo 是 网 站 的 标志 , 也 是 网 页 界面 中 
网 站 标识 体系 的 核心 。 在 设计 网 页 Logo 
时 ， 设 计 者 往往 需要 使 用 一 些 矢 量 图 形 绘 
制 软件 来 绘制 Logo 中 的 图 形 ， 并 对 Logo 
中 的 文字 做 一 些 特殊 处 理 。 本 练习 就 将 使 
用 Flash CC 中 的 矢量 图 形 绘制 功能 , 绘制 
-个 矢量 Logo， 如 图 4-37 所 示 。 
操作 步骤 : 
在 Flash 中 执行 【文件 ] |【 新 建 ] 命令 , 在 
弹出 的 【 新建 文档 】 对 话 框 中 设置 【 类 型 : 】 
为 “HTML 5 Canvas”, 创建 一 个 尺寸 为 550 
像素 x 400 像素 的 动画 文档 , 单 击 【 确定 】， 
如 图 4-38 所 示 。 
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4-38_ 新建 文档 


镶 轩 闪光 计 
Salls Fashionable Deslgn 


和 | 图 4-37_ 矢量 Logo 


在 【 时 间 轴 】 面板 中 选中 Flash 默认 创建 的 
图 层 , 在 图 层 名 称 上 右 击 鼠 标 , 执行 [ 属性 】 
命令 ， 如 图 4-39 所 示 。 
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和 图 4-39 查看 图 层 属性 
在 弹出 的 【 图 层 属性 】 对 话 框 中 ， 设 置 图 层 


的 【 名 称 ] 为 “background”, 单 击 【 确定】 
按钮 ， 如 图 4-40 所 示 。 


和 图 4-42 ,查看 素材 图 像 属性 


加 在 弹出 的 【位 图 属性 】 对 话 框 设 置 【 压缩 】 
为 “无 损 ( PNG/GIF )”, 单 击 【 更 新 ] 按钮 ， 
然后 再 单 击 【 确定 ] 按钮 , 如 图 4-43 所 示 。 


点 了 图 4-40 。 设 置 图 层 名 称 


执行 【文件 ] |【 导入 】|【 导入 到 舞台 】 命 
令 ， 从 本 书 配套 光盘 中 导入 和 图 4-43 更 新 位 图 属性 
“background.jpg” 素 材 图 像 ， 将 其 置 于 舞 
台中, 然后 在 舞台 中 选中 此 位 图 , 在 [ 属性 】 
检查 器 中 设置 其 宽度 和 高 度 , 使 之 与 舞台 尺 
寸 一 致 ， 如 图 4-41 所 示 。 


在 时 间 轴 面板 中 选择 background 图 层 , 再 
次 右 击 图 层 名 称 , 执行 【 属性 】 命令 ,在 弹 
出 的 【图 层 属性 】 对话 框 中 单 击 【 锁定 ] 复 
选 框 , 单 击 【 确定 ] 按钮 , 如 图 4-44 所 示 。 


大 图 4-41 ,导入 素材 并 设置 背景 尺寸 和 图 4-44 锁定 背景 图 层 


在 【 库 】 面板 中 选中 导入 的 素材 图 像 , 右 击 | 图 在 [时 间 轴 面板 的 左下 角 单 击 [ 新 建 图 层 】 
鼠标 执行 【 属性 】 命令， 如 图 4-42 所 示 。 按钮 司 |， 创 建 一 个 新 的 图 导 ， 用 同样 的 方 


式 将 其 命名 为 “vector”， 如 图 4-45 所 示 。 


和 图 4-45 .创建 图 层 


回 在 【工具 箱 】 中 单 击 选择 [ 多 角 星 形 ] 工具 
人 团 ， 然 后 在 【 属性 】 检查 器 中 设置 笔触 颜 
色 为 白色 ( #FFFFF )， 填 充 颜色 为 黑色 KK 了 图 4-48 ,定义 工具 设置 


( #000000 )， 笔 触 宽度 为 2 像素 ,样式 为 实 
线 ， 如 图 4-46 所 示 。 在 舞台 中 绘制 一 个 等 边 三 角形 图 形 ， 如 图 


4-49 所 示 。 


/了 图 4-46 设置 图 形 笔触 与 填充 人 图 4-49 ,给 制 等 边 三 角形 

选择 【选择 ] 工具]， 将 等 边 三 角形 右 下 
角 的 端点 向 左上 角 方 向 拖 自 , 使 之 成 为 斜 角 
三 角形 ， 如 图 4-50 所 示 。 


在 【属性 】 检查 器 的 【工具 设置 ] 选项 卡 中 
单 击 【 选项】 按钮， 如 图 4-47 所 示 。 


人 [7 图 4-47 .打开 【多 角 星 形 】 工 具 的 选项 发 了 图 4-50.。 拖 电 端 点 


在 弹出 的 [ 工具 设置 对话 框 中 设置 [ 样式 】 将 段 标 光标 置 于 三 角形 右 便 的 边 上 , 当 鼠 标 
为 “多 边 形 ",【 边 数 】 为 3， 单 击 【 确 定 】 指针 转换 为 指针 + 弧 形 NJ 时 ， 将 三 角形 右 侧 
按钮 ， 如 图 4_48 所 示 。 的 边 向 左上 方向 拖 息 ， 制 成 风帆 形状 的 图 

形 ， 如 图 4-51 所 示 。 


人 


和 图 4-51 制 成 风帆 图 形 


圈 选 整个 风帆 图 形 ,然后 执行 【 窗口 ]1[ 颜 
色 】 命令, 打开 【 颜色】 面板, 如 图 4-52 
所 示 。 


和 图 4-52 ,打开 【颜色 】 面板 


在 [ 颜色 ] 面 板 中 选择 [ 笔触 颜色 ] 按 钮 LE 到， 
然后 设置 【 颜色 类 型 ] 为 “线性 渐变 ”"， 在 
下 方 设置 渐变 调节 的 左 侧 调节 柄 颜色 为 黑 
色 ( #000000 )， 右 侧 为 白色 ( ##ffffff )， 如 图 


4-53 所 示 。 


和 图 4-53 设置 笔触 的 渐变 颜色 


在 [ 颜色 ] 面 板 中 选择 [ 填充 颜色 ] 按 馈 [ 妨 |， 
然后 设置 【 颜色 类 型 】 为 “线性 渐变 ”， 在 
下 方 设置 渐变 调节 的 左 侧 调节 柄 颜色 为 蓝 
色 ( #01AFEF )， 右 侧 为 黄色 ( #FEF300 )， 


如 图 4-54 所 示 。 
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和 图 4-54 ,设置 填充 渐变 


用 同样 的 方式 锁定 此 图 层 , 并 新 建 一 个 名 为 


第 
4 
章 
给 
制 
动 
回 
“text” 的 图 层 ， 如 图 4-55 所 示 。 案 


4-55 创建 文本 图 层 


在 【工具 箱 】 中 选择 【文本 】 工 具 国 ， 然 
后 即 可 在 【 属性 ] 检查 器 中 设置 字体 的 【 系 
列 ] 为 “ 汉 仪 雁 鲍 体 简 "，【 大 小 ] 为 “72 
磅 "”、 颜 色 为 “天 蓝 色 ”( #01AFEF )， 在 舞 
合 输入 “风帆 ”文本 ， 如 图 4-56 所 示 。 
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和 图 4-56_ 输 入 Logo 中 文 文本 
加 用 同样 的 方式 再 创建 一 段 文 本 , 输入 “时 尚 


ba 


区 
市 


红 司 灯 手 泳 


设计 ”, 设置 其 【大 小 ] 为 “36 磅 ",【 颜色 】 
为 “灰色 ”( #363536 ) 如 图 4-57 所 示 。 


点 有 图 4-57 输入 Logo 文本 


创建 第 三 段 文 本 , 设置 其 文本 的 【 系列 ] 为 
“Bauhaus LT Medium"”,[ 大 小 ) 为 “27 磅 ”， 
【颜色 ) 为 “灰色 ”( #363536 ), 并 输入 “Sails 
Fashionable Design” 文 本 内 容 , 如 图 4-58 
所 示 。 


和 图 4-58 输入 Logo 英文 文本 


在 【工具 箱 】 中 单 击 【 选择】 工具 国 ]， 分 
别 选 择 这 三 段 文本 , 拖 披 其 位 置 , 使 之 上 下 
对 齐 ， 如 图 4-59 所 示 。 


《了 图 4-59_ 对齐 Logo 文本 


按 下 Ctrl+A 组 合 键 ， 全 选 三 段 文 本 ， 然 后 
执行 两 次 【修改 】 |【 分 离 】 命令 ， 将 这 些 
文本 内 容 打 散 为 矢量 图 形 ,如 图 4-60 所 示 。 


《了 图 4-60 打 散 文本 


在 【工具 箱 】 中 选择 【 办 水瓶 ] 工具 四 |， 
设置 【笔触 颜色 】 为 “灰色 ”( #363536 )， 
【笔触 ] 为 “2.00"【 样式 ] 为 “ 实 线 ”， 为 
“风帆 ”二 字 添加 笔触 ， 如 图 4-61 所 示 。 


/7 图 4-61 ,为 文本 添加 笔触 


用 同样 的 方式 ,为 其 他 两 段 文 本 添加 [【 笔触 
颜色 】 为“ 天蓝 色 ”( #01AFEF ) 的 笔触 ， 
即 可 完成 整个 Logo 的 制作 ， 如 图 4-62 
所 示 。 


和 图 4-62 完成 Logo 案例 


4.7 课堂 练习 : 绘制 


Flash CC 的 绘制 功能 除了 可 以 绘制 矢 
量 Logo 之 外 ， 还 可 以 绘制 一 些 简单 的 矢 
量 图 形 ， 以 此 构成 网 页 中 的 矢量 元 素 。 本 
练习 就 将 使 用 Flash 的 图 形 功能 ， 绘 制 一 
个 首页 按钮 的 矢量 图 形 ， 如 图 4-63 所 示 。 


操作 步 又; /了 图 4-63 .绘制 三 维 按钮 

在 Flash 中 执行 【文件 】1[ 新 建 ] 命令 , 在 人 台中 , 然后 在 舞台 中 选中 此 位 图 , 在 [ 属性 】 
弹出 的 【 新 建文 档 】 对 话 框 中 设置 【类 型 : 】 检查 器 中 设置 其 宽度 和 高 度 与 舞 合 尺寸 一 
为 “HTML 5 Canvas”, 创建 一 个 尺寸 为 550 致 ， 然 后 锁定 此 图 层 ， 如 图 4-67 所 示 。 


像素 x 400 像素 的 动画 文档 , 单 击 【 确定 】， 
如 图 4-64 所 示 。 


有 | 


和 图 4-64 新 建文 档 


在 【时 间 轴 】 面 板 中 选中 Flash 默认 创建 的 
图 层 , 在 图 层 名 称 上 右 击 鼠 标 , 执行 [ 属性 】 
命令 ， 如 图 4-65 所 示 。 

在 弹出 的 【 图 层 属性 】 对话 框 中 ,设置 图 层 
的 【 名 称 ] 为 “background”, 单 击 【 确定】 
按钮 ， 如 图 4-66 所 示 。 

执行 【文件 ] |【 导入 】|【 导入 到 舞台 】 命 
令 ， 从 本 书 配 套 光 盘 中 导入 
“background.jpg” 素 材 图 像 ， 将 其 置 于 舞 上 图 4-66 更 改 图 层 名 称 
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和 图 4-67 ,导入 素材 图 像 


新 建 名 为 “shadow” 的 图 层 , 在 【 工具 箱 】 
中 选择 【基本 矩形 】 工 具 国 ], 在 【属性 】 
检查 器 中 设置 填充 颜色 为 蓝 色 ( #003366 )， 
清除 笔触 ， 然 后 再 设置 【 矩形 选项 ] 选项 卡 
中 的 圆 角 弧度 为 “20”"， 如 图 4-68 所 示 。 


和 图 4-68 。 绘 制 圆 角 和 矩形 


图 在 【工具 箱 】 中 单 击 【 选 择 】 工 具 国 |， 选 
中 该 圆 角 矩 形 ， 然 后 在 【 属性 】 检查 器 中 设 
置 其 水 平 坐标 、 垂 直 坐标 以 及 宽度 和 高 度 ， 
然后 锁定 此 图 层 ， 如 图 4-69 所 示 。 
[3 
NN 


和 |_ 图 4-69 ,完成 按钮 投影 


新 建 名 为 “button” 的 图 层 ， 用 同样 的 方式 
绘制 一 个 与 之 前 步骤 相同 的 圆 角 矩 形 , 设置 
其 水 平 坐标 为 “175”， 垂直 华 标 为 “100”， 
如 图 4-70 所 示 。 
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和 图 4-70 ,绘制 按钮 背景 


图 选中 绘制 的 按钮 背景 ,执行 【 窗口】1【 颜 
色 ] 命 令 , 在 弹出 的 [ 颜色 】 面 板 中 单 击 【 填 
充 颜色 ] 按钮 [加 中 , 设置 【 颜色 类 型 ] 为 “ 径 
向 渐变 "， 然 后 设置 渐变 色 的 左 侧 端点 为 浅 
蓝 色 ( #00ccff )， 右 侧 端点 为 蓝 色 
( #006699 )， 最 后 ， 锁 定 按钮 背景 的 图 层 ， 
如 图 4-71 所 示 。 
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上 了 图 4-71_ 设 置 按 钮 渐变 


图 新 建 名 为 “triangle” 的 图 层 ， 使 用 【 多 角 
星 形 】 工 具 [ 加 | 在 该 图 层 绘制 一 个 填充 为 灰 
色 (#cccccc ) 的 等 边 三 角形 ， 如 图 4-72 
所 示 。 
单 击 【 选择 】 工 具 鸭 |， 将 鼠标 光标 置 于 等 
边 三 角形 项 部 端点 ， 当 鼠标 光标 转换 为 “ 端 
点 调节 ”状态 % 时 , 按 下 鼠标 左 键 向 下 拖 外 ， 
将 其 转变 为 等 腰 三 角形 ， 如 图 4-73 所 示 。 
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和 图 4-73 ,修改 三 角形 端点 


选择 【 墨水 瓶 】 工具 加 |， 在 【 属性 】 检查 
器 中 设置 [ 笔触 颜色 ) 为 “灰色 ”( #666666 )， 
【 笔触 ] 为 “2.00” 像 素 ， 然 后 为 等 腰 三 角 
形 添加 轮廓 ， 如 图 4-74 所 示 。 


Be 


和 图 4-74 。 添 加 轮廓 笔触 


在 【工具 箱 】 中 单 击 【 选择 】 工 具 国 |]， 分 

别 选择 等 腰 三 角形 下 方 和 右上 方 的 笔触 , 按 
下 Delete 键 将 其 删除 ， 然 后 锁定 此 图 层 ， 
如 图 4-75 所 示 。 

新 建 名 为 “rectangle” 的 图 层 , 选择 [矩形 】 
工具 [如], 然后 在 【 属性 ] 检查 器 中 设置 【 笔 


触 颜色 】 为 “灰色 ”( #666666 ),【 填充 颜 
色 ] 为 “灰色 ”( #cccccc ),【 笔触 ] 为 “2.00” 
像素 ， 在 舞台 绘制 一 个 矩形 ， 如 图 4-76 
所 示 。 
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发 了 图 4-75 完成 内 阴影 效果 


4-76 绘制 矩形 


在 【工具 箱 】 中 单 击 【 选择】 工具 国 ]|， 分 
别 选 中 矩形 右 侧 和 下 方 的 笔触 线 , 按 Delete 
键 将 其 删除 ， 完 成 矩形 的 内 阴影 效果 ,并 锁 
定 此 图 层 ， 如 图 4-77 所 示 。 
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和 图 4-77 。 完 成 矩形 内 阴影 


新 建 “highlight” 图 层 ， 在 【 工具 箱 】 中 选 
择 【 基 本 和 矩形 】 工 具 国 ， 然 后 绘制 一 个 与 


按钮 背景 尺寸 和 位 置 均 相 同 的 圆 角 矩形 , 如 
图 4-78 所 示 。 
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| 图 4-78 ,绘制 高 亮 区 域 


选中 绘制 的 圆 角 矩形 ， 执 行 【窗口 ] 1【 颜 
色 】 命令 ， 在 【 颜色 】 面板 中 单 击 【 填充 颜 
色 】 按钮 [@j， 设 置 【 颜色 类 型 ] 为 “线性 
渐变 "， 如 图 4-79 所 示 。 

及 . 心 冉 [mm 相 
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在 了 图 4-79 设置 渐变 类 型 

在 【颜色 】 面板 中 设置 渐变 的 左 侧 端 点 为 白 
色 ( #fffff )， 透 明度 为 100%， 右 侧 端点 为 
白色 ( #fffff )， 透 明度 为 0%， 如 图 4-80 


所 示 。 
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人 _ 图 4-80, 设置 渐变 颜色 


拖 抽 渐变 颜色 的 右 侧 端点 至 整个 渐变 色 块 
的 25% 处 ,使 之 以 非 均衡 的 方式 进行 渐变 ， 
如 图 4-81 所 示 。 


在 了 图 4-81 ,设置 渐变 端点 位 置 


在 【工具 箱 】 中 选择 【 渐变 变形 】 工具 | 加]， 
然后 将 圆 角 和 矩形 右上 角 的 旋转 调节 柄 拖 彼 
至 其 右 下 方 , 即 可 完成 按钮 绘制 ,如 图 4-82 
所 示 。 


和 图 4-82 ,修改 渐变 方向 


4.8 思考 与 练习 


一 、 填 空 题 


1. Flash CC 可 以 创建 包括 a 
等 4 种 类 


型 的 动画 。 
2. AIR 技术 可 以 编译 基于 、 
以 及 等 3 种 平台 的 富 互 联 
网 可 执行 程序 。 

3. Flash 文档 本 身 基 本 是 由 三 学 

等 5 个 层级 构成 。 
在 绘制 曲线 线条 时 ， 可 采用 三 种 模式 ， 
即 昌 以 及 等 。 
5.【 多 角 星 形 】 工 具 的 作用 是 绘制 
以 及 等 复杂 的 几何 图 形 。 
.【 颜 色 】 面 板 可 以 提供 
等 4 种 填 


» 


CN 


充 方式 。 
二 、 选 择 题 


1. 当 同 时 打开 多 个 动画 设计 方案 是 ，Flash 
CC 的 【文档 窗口 】 会 显示  ? 
A. 【标题 菜单 栏 】 
B. 【选项 卡 】 栏 
C. 【状态 】 栏 
D. 【舞台 】 区 域 
2. Flash CC 在 创建 基于 网 页 和 脚本 的 矢量 
图 形 时 ， 需 要 设置 文档 类 型 为 ? 
A. HIML 5 Canvas 
B. WebGL 
C. ActionScript 3.0 
D. AIR 
3. 帧 频 是 指 ? 
A. 动画 文档 中 包含 的 帧 数 


B. 动画 文档 中 某 一 场景 的 帧 数 
C. 动画 播放 时 每 一 帧 在 屏幕 中 显示 时 
所 占 的 时 间 
D. 动画 文档 所 有 场景 的 帧 数 平均 值 
4. 在 Flash 中 绘制 圆 角 和 矩形 后 ， 如 果 还 需 
要 对 圆 角 和 矩形 的 圆 角 弧度 进行 更 改 ， 可 使 用 
来 绘制 贺 角 矩 形 。 


C. 椭圆 工具 
D. 基本 和 矩形 工具 

5. 多 角 星 形 工 具 和 和 拢 形 工具 都 可 以 绘制 成 
的 图 形 是 ? 
正方 形 
. 六 边 形 
五 角 星 形 
梯形 
6. 要 调节 渐变 填充 的 颜色 方向 ， 可 使 用 

党 

A. 渐变 变形 工具 

B. 颜色 面板 

C. 调 色 板 
.颜色 拾取 器 
三 、 简 答题 

1. Flash CC 允许 使 用 哪些 脚本 语言 来 控制 
动画 元 素 ? 

2. 如 何 快速 更 改 Flash 文档 的 尺寸 ? 

3. Flash CC 允许 导入 哪些 类 型 的 素材 
文件 ? 

4. 如 何 将 互联 网 的 视频 导入 到 Flash 文 
档 中 ? 

5. 绘制 一 个 正方 形 图 形 都 有 哪些 方法 ? 

6. 如 何 为 矢量 图 形 快速 添加 轮廓 ? 
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设计 交互 动画 


S.1 使 用 动画 元 件 


Flash 就 会 更 新 所 有 该 元 件 的 调用 。 元 件 除了 可 以 直接 JE 


在 Flash 中 使 用 外 ， 也 可 以 被 ActionScript 脚本 以 类 和 | 
实例 的 方式 调用 ， 通 过 脚本 对 其 进行 控制 。 Se 
根据 元 件 的 作用 和 类 型 ，Flash 将 其 划分 为 三 种 基 | ne 
本 形式 ， 即 影片 剪辑 元 件 、 图 形 元 件 和 按钮 元 件 。 在 实 A 
际 的 动画 设计 中 , 设计 者 应 针对 实际 的 需求 来 选择 元 件 Ee BE 
的 类 型 ， 针 对 类 型 来 处 理 这 些 元 件 以 及 元 件 中 的 元 素 。 性 
在 Flash 中 创建 元 件 , 可 执行 【插入 】1【 新 建 元 件 】 E20 
命令 ,在 弹出 的 【创建 新 元 件 】 对 话 框 中 设置 元 件 的 属 | 
性 ， 如 图 5-1 所 示 。 网 
该 对 话 框 分 为 两 个 部 分 , 分 别 用 于 定义 元 件 的 基本 Di 
属性 和 高 级 属性 ， 其 作用 如 表 5-1 所 示 。 KJ 了 图 5-1 ,创建 新 元 件 对 话 框 


属 性 


启用 9 切片 缩放 比 
例 辅 助 线 

为 ActionScript 导 
出 


在 第 1 帧 中 导出 


为 运行 时 共享 导出 
为 运行 时 共享 导入 
URL 


5 表 5-1 。 创建 新 元 件 的 属性 


| 
定义 元 件 在 库 中 的 名 称 
定义 元 件 的 类 型 ， 包 括 影片 剪辑 、 图 形 和 按钮 等 三 种 
定义 元 件 在 库 中 的 位 置 ， 默 认为 “ 库 根 目录 ” 
为 原件 添加 9 切片 辅助 线 ， 辅 助 元 件 中 内 容 的 定位 
允许 设计 者 通过 ActionScript 脚本 语言 调用 该 元 件 
在 该 元 件 创建 后 直接 导出 到 第 一 帧 〈 仅 当 【 为 ActionScript 导出 】 选 项 被 选中 
时 使 用 ) 
定义 ActionScript 调用 该 元 件 时 的 类 名 称 ， 设 计 者 可 以 单 击 【验证 类 定义 】 
对 其 进行 验证 ， 也 可 以 单 击 【 编 辑 类 定义 】 辆 在 脚本 中 重 写 一 段 新 的 定义 代码 
根据 元 件 的 类 型 , 定义 该 元 件 所 所 属 的 基 类 , 设计 者 可 以 单 击 【验证 基 类 定义 】 
四 对 其 进行 验证 ， 也 可 以 单 击 【 编 辑 基 类 定义 】 国 在 脚本 中 重 写 一 段 新 的 定 
义 代 码 
将 元 件 作 为 库 项 目 保存 ， 并 最 终 输 出 为 其 他 影片 的 资源 导出 
从 外 部 URL 库 中 导入 元 件 内 容 
导入 元 件 的 外 部 库 URL 地 址 


源 文件 在 创建 元 件 的 同时 也 将 共享 到 外 部 的 Flash 源 文件 


元 件 


在 创建 元 件 的 同时 将 共享 到 其 他 元 件 


自动 更 新 当 该 元 件 被 修改 时 ， 保 持 共享 的 Flash 源 文件 和 元 件 同 时 得 到 更 新 


【高 级 】 选 项 下 的 各 项 功能 通常 用 于 脚本 控制 元 件 或 多 人 协作 创造 动画 , 其 并 非 创 建 
元 件 的 必须 选项 。 如 果 设 计 者 只 需要 创建 简单 的 动画 元 件 ， 可 以 完全 忽略 【高 级 】 选 项 ， 


仅 设 置 元 件 的 名 称 、 


图 形 元 件 的 作 月 


类 型 ， 单 击 【 确 定 】 即 可 。 


昌 是 存储 导入 的 位 图 图 像 、 矢 量 图 形 以 及 文本 对 象 ， 为 这 些 资源 和 内 


容 提供 最 基本 的 可 复 用 性 解决 方案 。 图 形 元 件 是 最 基本 的 矢量 元 件 ， 当 该 类 元 件 被 作为 
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实例 添加 到 舞台 时 ， 会 和 舞台 的 时 间 轴 同步 播放 。 

图 形 元 件 无 法 被 导出 到 ActionScript 脚本 的 实例 中 , 说 明 在 Flash 中 创建 的 所 有 图 形 
元 件 (ActionScript 脚本 创建 的 Sprite 对 象 除外 ) 均 无 法 被 ActionScript 脚本 调用 。 图 形 
元 件 不 支持 声音 类 素材 ， 也 不 能 捕获 鼠标 和 键盘 事件 ， 也 就 是 说 该 类 元 件 不 具备 可 交 
互 性 。 

在 实际 的 动画 设计 中 ， 图 形 元 件 通常 被 用 于 显示 静态 的 图 像 、 图 形 和 文本 等 内 容 。 
在 【创建 新 元 件 】 对 话 框 中 设置 【类 型 】 为 “图 形 ”， 即 可 创建 一 个 图 形 元 件 ， 如 图 5-2 
所 示 。 
在 创建 图 形 元 件 之 后 ，Flash 会 自动 在 【文档 窗口 】 中 打开 该 图 形 元 件 ， 并 将 该 元 件 
视 为 当前 场景 下 的 一 个 元 素 ， 在 【文档 窗口 】 的 【状态 】 栏 中 体现 这 种 层级 关系 。 默认 的 
图 形 元 件 不 包含 任何 内 容 ， 需 要 设计 者 导入 素材 或 手工 绘制 和 输入 内 容 ， 如 图 5-3 所 示 。 


和 图 5-2 ,创建 图 形 元 件 和 图 5-3_, 展 开 的 图 形 元 件 


在 图 形 元 件 内 部 的 舞台 中 , 显示 有 一 个 十 字形 状 攻 
的 图 标 , 该 图 标 表 示 此 处 为 图 形 元 件 的 原点 (或 称 注 
册 点 ， 即 横 坐 标 0， 纵 坐标 0) 。 在 创建 该 图 形 元 件 
之 后 ， 设 计 者 即 可 在 该 图 形 元 件 的 舞台 上 绘制 内 容 ， 
将 其 保存 在 该 图 形 元 件 中 以 备 调用 ， 如 图 5-4 所 示 。 


影片 前 辑 元 件 实际 上 是 一 个 微缩 版 的 Flash 影 ee 
片 ,其 内 部 可 以 嵌入 任何 舞台 上 的 对 象 , 如 图 形 元 件 、 《了 图 54 给 制图 形 元 件 
按钮 元 件 等 ， 也 可 以 内 柑 图 像 、 图 形 、 广 本、 音频、 视频 乃至 Flash 组件 等 各 种 Flash 资源 。 
创建 影片 前 辑 元 件 的 方法 与 创建 图 形 元 件 类 似 ， 
在 【创建 新 元 件 】 对 话 框 中 设置 【类 型 】 为 “影片 前 
辑 ”， 然 后 即 可 单 击 【确定 】 按 钮 ， 如 图 5-5 所 示 。 
如 果 设 计 者 需要 创建 由 ActionSeript 脚本 控制 和 
调用 的 影片 前 错 元 件 ， 也 可 以 单 击 【 高 级 】 选 项 ， 在 
更 新 的 对 话 框 中 选择 【为 ActionScript 导出 】 选 项 ， 
定义 其 类 的 名 称 ， 单 击 【 确 定 】， 如 图 5-6 所 示 。 


和 图 5-5_, 创 建 影片 剪辑 元 件 


影片 剪辑 元 件 可 以 支持 几乎 所 有 Flash 的 交 
互 操作 ， 如 监听 鼠标 操作 、 键 盘 操 作 等 ， 也 可 以 
内 嵌 诸 如 视频 、 音 频 、Flash 影片 等 多 种 多 媒体 
资源 ， 这 些 特性 使 得 其 成 为 Flash 中 应 用 最 广泛 
的 元 件 。 


按钮 元 件 是 Flash 中 的 一 种 重要 交互 元 件 ， 
其 与 其 他 两 种 元 件 相 比 ， 具 备 对 鼠标 滑 过 、 鼠 标 
按 下 以 及 鼠标 单 击 等 类 型 的 动画 事件 具有 更 好 
的 支持 性 , 因此 在 一 些 需要 获取 用 户 鼠 标 操作 的 
影片 中 被 广泛 地 应 用 。 机 

创建 按 负 元 件 的 方法 与 其 他 两 种 元 件 关 似 ， 人 了 图 开 4 为 As 时 4 于 上 和 
在 Flash 中 执行 【插入 】| 【新建 元 件 】 命 令 ， 然 后 即 可 在 弹出 的 【创建 新 元 件 】 对 话 框 
中 设置 元 件 的 名 称 ， 设 置 其 【类 型 】 为 “按钮 ”， 单 击 【 确 定 】 按 钮 ， 如 图 5-7 所 示 。 

按钮 元 件 也 可 以 被 ActionScript 脚本 语言 调用 , 如 果 设 计 者 需要 通过 ActionScript 脚 
本 语言 来 调用 和 控制 该 按钮 元 件 ， 也 可 以 单 击 【高 级 】 按 钮 ， 在 更 新 的 对 话 框 中 将 其 为 
ActionScript 导出 ， 按 钮 元 件 的 一 般 基 类 通常 为 SimpleButton ， 即 
“flash.display.SimpleButton” 类 。 

按钮 元 件 的 【时 间 轴 】 比 较 特殊 ， 与 普通 舞台 、 影 片 剪辑 元 件 、 图 形 元 件 的 区 别 在 
于 ， 按 钮 元 件 的 时 间 轴 面板 中 ， 只 允许 设计 者 定义 4 个 帧 ， 表 现 为 按钮 的 4 种 鼠标 交互 
状态 ， 如 图 5-8 所 示 。 


[了 图 5-7 .创建 按钮 元 件 [了 图 5-8 .按钮 元 件 的 时 间 轴 
在 前 3 个 状态 帧 中 ， 可 以 放置 除了 按钮 元 件 本 身 以 外 的 所 有 Flash 对 象 ， 在 【点 击 】 

中 的 内 容 是 一 个 图 形 ， 该 图 形 决定 着 当 鼠 标 指 向 按钮 时 的 有 效 范围 ， 它 们 各 自 功能 如 表 

5-2 所 示 。 

3 表 5-2 ,按钮 元 件 的 帧 和 作用 


在 创建 按钮 元 件 时 ， 设 计 者 可 以 依次 选中 每 一 个 帧 ， 为 帧 编辑 内 容 ， 然 后 即 可 完成 
按钮 元 件 的 制作 。 


Flash 的 动画 元 素 包括 文本 、 矢 量 形状 、 
图 形 元 件 、 影 片 剪 辑 元 件 和 按钮 元 件 等 几 种 ， 
为 丰富 这 些 动画 元 素 的 显示 效果 ，Flash 为 这 
些 元 素 提供 了 多 种 效果 设置 ， 包 括 显示 效果 、 
色彩 效果 以 及 滤 镜 等 。 


显示 效果 的 作用 是 定义 动画 元 素 在 舞台 
或 影片 前 得 中 的 显示 方式 和 基本 效果 ,其 可 被 
应 用 到 图 形 元 件 、 影 片 剪辑 元 件 和 按钮 元 件 
中 。 在 选中 这 些 动画 元 素 之 后 , 即 可 在 【属性 】 本 
检查 器 中 的 【显示 】 选 项 卡 中 设置 此 类 效果 属 人 了 图 5-9 显示 效果 的 设置 
性 ， 如 图 5-9 所 示 。 

在 该 对 话 框 中 ， 设 计 者 可 以 定义 动画 元 素 的 【可 见 】 性 、【 混 合 】 模 式 、【 呈 现 】 
模式 、【 透 明 】 状 态 以 及 不 透明 的 背景 色 等。 

其 中 ，【 可 见 】 属 性 默认 会 处 于 被 选中 状态 ， 如 取消 该 选择 项 目 ， 则 所 选 的 动画 元 
素 将 被 隐藏 起 来 。 


1. 混合 模式 


所 谓 的 混合 模式 ， 是 指 元 件 实例 同 其 重合 的 对 象 相互 改变 透明 度 或 颜色 的 过 程 。 其 
工作 原理 类 似 于 A+B=C。 通常 ,在 设计 创作 时 ,利用 混合 模式 ， 可 以 混合 重 有 元 件 中 的 
颜色 ， 从 而 创作 出 较 独特 的 艺术 效果 。 

Flash 允许 设计 者 为 动画 元 素 定义 混合 模式 ， 就 像 Photoshop 为 图 层 定义 混合 模式 一 
样 ， 其 支持 的 混合 模式 类 型 也 与 Photoshop 的 图 层 混 合 模式 大 体 类 似 ， 其 具体 含义 如 表 
5-3 所 示 。 


S23 表 5-3 。 动画 元 素 的 混合 模式 

混合 模式 含义 

正常 正常 应 用 颜色 ， 不 与 基准 颜色 发 生 混合 

图 层 可 以 层 登 各 个 影片 效果 ， 而 不 影响 其 颜色 

变 暗 只 替换 比 混合 颜色 亮 的 区 域 ， 比 混合 颜色 上 暗 的 区 域 将 保持 不 变 


瑞 加 ”| 将 基准 颅 色 与 混合 颜色 复合 ， 从 而 产生 较 陪 的 颜色 

变 襄 。 ”| 只 巷 换 比 混合 颅 色 暗 的 区 域 ， 比 混合 闫 色 沈 的 区 域 将 保持 不 变 

让 色 ”| 将 混合 大 色 的 反 色 与 基准 闫 色 复 合 ， 从 而 产生 淋 自 效果 

壮 加 ”| 复合 或 过 泪 硕 色 ， 具 体操 作 需 取决 于 基准 闫 名 

强 光 | 复合 或 过 让 硕 色 ， 具 体操 作 需 取 奖 于 混合 模 式 闫 色 。 该 歼 果 天 似 于 用 点 光源 照射 对 象 
从 基色 减 去 混合 色 或 从 混合 色 减 去 基色 , 具体 取决 于 哪 一 种 的 亮度 值 较 大 。 该 效果 类 似 

兰 异 于 色彩 底片 


通常 用 于 在 两 个 图 像 之 间 创 建 动画 的 变 之 分 解 效 果 
通常 用 于 在 两 个 图 像 之 间 创建 动画 的 变 暗 分 解 效果 


删除 所 有 基准 颜色 像素 ， 包 括 背景 图 像 中 的 基准 颜色 像素 


需要 注意 的 是 ， 擦 除 和 Alpha 混合 模式 要 求 将 图 层 混合 模式 应 用 于 父 级 元 件 ， 不 能 
将 背景 更 改 为 擦 除 并 应 用 它 ， 因 为 该 对 象 将 是 不 可 见 的 。 


2. 呈现 模式 


呈现 模式 的 作用 是 对 动画 元 素 中 的 矢量 图 形 进行 预 处 理 ， 根 据 设计 者 所 选 的 模式 来 
决定 其 在 Flash 影片 内 部 的 存储 状态 。 在 Flash CC 中 , 为 动画 元 素 提供 了 三 种 呈现 模式 ， 
如 表 5-4 所 示 。 

5 表 5-4 。 动画 元 素 的 呈现 模式 
呈现 模式 

原来 的 (无 更 改 ) | 定义 文本 、 矢 量 图 形 为 默认 的 存储 显示 模式 ， 即 贝 塞 尔 曲线 模式 

为 文本 、 矢 量 图 形 建 缓存 ， 在 播放 影片 时 根据 屏幕 的 尺寸 进行 适 配 ， 如 

bess tla st a 

导出 为 位 图 强制 将 文本 、 矢 量 图 形 以 位 图 的 方式 导出 和 播放 

Flash 影片 中 的 矢量 图 形 通常 是 实时 演算 出 来 再 播放 的 , 其 优点 在 于 可 以 无 损 缩放 任 
意 尺寸 而 不 会 产生 模糊 、 锯 齿 的 现象 。 但 是 ， 实 时 演算 的 矢量 图 形 往往 会 消耗 更 多 的 系 
统 资源 〈 对 手持 设备 而 言 这 点 这 些 系统 资源 意味 着 设备 的 续航 力 的 降低 ) 。 

在 Flash 影片 播放 时 ， 显 示 位 图 可 以 有 效 地 降低 系统 资源 消耗 ， 但 是 位 图 的 缩放 性 
能 较 差 ， 同 时 往往 也 会 使 影片 的 文件 尺寸 更 大 。 

旧版 本 的 Flash 无 法 对 矢量 图 形 进行 自动 转换 ， 也 就 是 说 只 能 强制 以 矢量 图 形 的 方 
式 实 时 演算 播放 。Flash CC 中 的 呈现 模式 功能 意义 在 于 ， 其 允许 在 发 布 时 由 用 户 根据 需 
求 来 决定 是 否 将 Flash 影片 中 的 矢量 元 素 转换 为 位 图 ， 以 降低 播放 时 的 资源 消耗 。 

呈现 模式 这 一 功能 对 用 于 小 屏幕 的 手持 设备 来 说 意义 重大 。 在 设计 基于 小 屏幕 或 手 
持 设备 的 Flash 影片 时 ， 设 计 者 完全 可 以 缓存 为 位 图 或 导出 为 位 图 的 方式 来 设置 动画 元 
素 ， 提 升 这 些 设备 的 续航 能 力 。 


色彩 效果 的 作用 是 通过 动画 元 素 的 颜色 来 进行 数学 运算 ， 以 改变 这 些 元 素 的 显示 颜 
色 。Flash 允许 设计 者 为 所 有 类 型 的 动画 元 件 添加 色彩 效果 ， 改 变 其 颜色 外 观 。 在 Flash 
中 选择 元 件 , 然后 即 可 在 【属性 】 检查 器 中 的 【色彩 效果 】 选 项 卡 中 选择 色彩 效果 的 【 样 
式 】， 应 用 色彩 效果 ， 如 图 5-10 所 示 。 
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Flash 提供 了 4 种 类 型 的 色彩 效果 ， 即 亮度 、 
色调 、 高 级 以 及 Alpha 等 ， 其 具体 作用 如 下 所 示 。 


1. 亮度 


该 选项 用 于 调整 元 件 实例 的 相对 亮度 或 暗 度 ， | 
度量 范围 是 从 黑 (-100%) 到 白 〈100%) ， 亮 度 值 
越 大 , 则 颜色 越 亮 , 反之 则 越 暗 。 如 果 要 调整 亮度 ， 
只 需 单 击 三 角形 滑 块 并 拖 动 即 可 ,也 可 以 直接 在 后 8 
面 的 数字 框 中 ， 输 入 具体 的 数值 ， 如 图 5-11 所 示 。 图 5-10。 色 彩 效果 设置 


1 1 国 . 二 下 [10% | 


5-11 ,亮度 的 色彩 效果 


2. 色调 


该 选项 用 于 使 用 相同 的 色相 为 实例 着 色 。 选 择 该 样式 后 ， 其 下 面 会 显示 多 个 选项 ， 
其 包括 【色调 】， 以 及 对 应 的 【 红 】、【 绿 】、【 蓝 】 等 。 其 中 ，【 色 调 】 属 性 决定 应 
用 颜色 的 深度 ，【 红 】、【 绿 】、【 蓝 】 等 属性 用 于 定义 应 用 的 颜色 值 。 

如 果 需 要 设置 元 件 实例 的 色调 百分比 〈 从 透明 到 完全 饱和 ) ， 可 以 直接 设置 色调 后 
面 的 参数 ， 如 果 需 要 选择 颜色 ， 只 需 在 各 自 的 框 中 输入 红 、 绿 、 蓝 的 值 ， 或 者 单 击 颜 色 
色 块 ,打开 【 拾 色 器 】 对 话 框 ， 自 定义 选择 颜色 。 

例如 ， 为 元 件 应 用 蓝 色 (#0000FF) ， 设 置 应 用 颜色 的 深度 为 30%， 如 图 5-12 所 示 。 


3. 高 级 


该 选项 主要 用 于 分 别 调整 元 件 实例 的 红色 、 绿 色 和 透明 度 。 对 于 在 位 图 对 象 上 创建 
具有 微妙 色彩 效果 的 动画 ， 此 选项 非常 有 用 。 其 中 ， 左 侧 的 选项 设置 可 以 按 指定 的 百 分 
比 降低 颜色 或 透明 度 的 值 ， 右 侧 的 选项 设置 可 以 按 常 数值 降低 或 者 增 大 颜色 或 透明 度 的 
值 。 

通常 所 调整 的 色彩 效果 ， 应 该 是 当前 红 、 绿 。 蓝 和 Alpha 值 都 乘 以 百分比 值 ， 然 后 
加 上 右 列 中 的 常数 值 ， 产 生 新 的 颜色 值 。 例 如 ， 如 果 当 前 的 红色 值 是 100， 此 时 将 左 侧 
的 滑 块 设置 为 50%， 并 将 右 侧 滑 块 设置 为 100%， 则 会 产生 一 个 新 的 红色 值 150[ (100X 
0.5) +100=150]， 如 图 5-13 所 示 。 


和 图 5-12 ,应 用 30% 蓝 色色 调 和 图 5-13 ,高 级 色彩 效果 


4. Alpha 


该 选项 用 于 调整 元 件 的 透明 度 ， 调 整 范 围 从 透明 (0%) 到 完全 饱和 (100%) ， 如 
图 5-14 所 示 。 


/了 图 5-14 ,Aipha 色彩 效果 


在 Flash 中 ， 可 以 为 文本 、 按 钮 和 影片 剪辑 对 象 添加 滤 镜 ， 从 而 产生 投影 、 模 糊 、 
发 光 等 特殊 效果 。 要 使 用 滤 镜 功能 ， 需 要 先 在 舞台 上 选择 文本 、 按 钮 或 影片 剪辑 对 象 ， 
然后 进入 【 滤 镜 】 面 板 ， 单 击 【添加 滤 镜 】 芭 码 按钮， 从 弹出 的 【 滤 镜 】 菜 单 中 选择 相应 
的 滤 镜 选项 ， 如 图 5-15 所 示 。 

对 象 每 添加 一 个 新 的 滤 镜 ,在 【属性 】 检 查 器 中 就 会 将 其 添加 到 下 方 的 滤 镜 列表 中 。 
设计 者 可 以 对 同一 个 对 象 应 用 多 个 滤 镜 效果 ， 这 些 滤 镜 效果 都 会 显示 在 【 滤 镜 】 选 项 卡 
下 方 的 列表 中 。 当 设计 者 单 击 选择 列表 中 的 某 一 个 滤 镜 项 目 时 ,可 以 单 击 【 删 除 滤 镜 图 
按钮 ， 将 该 滤 镜 删除 。 在 【 滤 镜 】 菜 单 中 ， 共 包含 7 种 滤 镜 功能 ， 以 及 【删除 全 部 】、 
【启用 全 部 】 和 【禁用 全 部 】 等 三 个 快捷 批量 命令 。 


1. 投影 滤 镜 


投影 滤 镜 以 对 象 的 轮廓 为 基准 ， 向 对 象 轮廓 之 外 指定 的 倾斜 角度 发 散 某 种 颜色 的 渐 
淡 模糊 颗粒 ， 以 实现 该 对 象 在 表面 的 投影 效果 ， 如 图 5-16 所 示 。 


沪 柱 民 司 灯 手 沪 半 悦 


Q 
O 
中 
区 


和 图 5-15 ,添加 滤 镜 和 图 5-16 ,投影 滤 镜 


在 添加 投影 滤 镜 后 ， 可 以 通过 【 滤 镜 】 选 项 组 中 的 参数 来 更 改 投影 的 效果 ,如 表 5-5 

所 示 。 
3 表 5-5 投影 滤 镜 的 参数 设置 

参 数 作 用 

模糊 x | 控制 投影 在 水 平方 向 发 散 的 宽度 
模糊 Y ”| 控制 投影 在 乖 直 方向 发 艇 的 高 度 

强度 该 选项 用 于 设置 阴影 的 明暗 度 ， 数 值 越 大 ， 阴 影 就 越 暗 

品质 该 选项 用 于 控制 投影 的 质量 级 别 ， 设 置 为 "高 " 则 近似 于 高 斯 模糊 ， 设 置 为 " 低 "可 以 实现 

最 佳 的 回放 性 能 

角度 该 选项 用 于 控制 阴影 的 角度 ， 在 其 中 输入 一 个 值 或 单 击 角度 选取 器 并 拖 动 角度 得 
距离 该 选项 用 于 控制 阴影 与 对 象 之 间 的 距离 

空 选择 此 复 选 框 ， 可 以 从 视觉 上 隐藏 源 对 象 ， 只 显示 投影 

内 阴影 ”| 启用 此 复 选 框 ， 可 以 在 对 象 边界 内 应 用 阴影 

隐藏 对 象 | 启用 此 复 选 框 ， 可 以 隐藏 对 象 并 只 显示 其 阴影 ， 从 而 可 以 更 轻松 地 创建 逼真 的 阴影 
颜色 单 击 此 处 的 色 块 ， 可 以 打开 【颜色 拾取 器 } 设置 阴影 的 颜色 


2. 模糊 滤 镜 


模糊 滤 镜 的 作用 是 将 对 象 中 每 一 条 矢量 笔触 、 填 充 色 块 以 及 引用 的 位 图 图 元 像素 进 
行 柔 化 处 理 ， 使 之 在 视觉 效果 上 更 加 柔和 ， 如 图 5-17 所 示 。 


和 图 5-17 ,模糊 滤 镜 


模糊 滤 镜 包含 的 参数 仅 有 三 种 ， 这 些 参数 的 作用 与 投影 滤 镜 大 体 类 似 ， 如 表 5-6 所 示 。 
5 表 5-6 _。 模糊 滤 镜 的 参数 设置 


控制 对 象 内 所 有 视觉 元 素 在 水 平方 向 发 散 的 宽度 
控制 对 象 内 所 有 视觉 元 素 在 垂直 方向 发 散 的 高 度 

该 选项 用 于 控制 投影 的 质量 级 别 ， 设 置 为 "高 " 则 近似 于 高 斯 模糊 ， 设 置 为 低 "可 以 实现 
最 佳 的 回放 性 能 


模糊 并 
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通过 设置 模糊 的 水 平方 向 和 垂直 方向 宽度 或 高 度 ， 还 可 以 使 对 象 呈现 出 一 种 动感 效 
果 。 例 如 ， 当 【模糊 入】 的 参数 值 比 【模糊 Y】 大 一 些 时 ， 呈 现 水 平方 向 晃动 的 效果 ， 
反之 则 呈现 垂直 方向 晃动 的 效果 。 


3. 发 光 滤 镜 


发 光 滤 镜 与 投影 滤 镜 的 区 别 在 于 ， 投 影 滤 镜 会 向 指定 的 角度 方向 来 发 散 渐变 颜色 颗 
粒 ， 而 发 光 滤 镜 则 是 向 四 周 所 有 方向 来 发 散 渐变 颜色 颗粒 ， 如 图 5-18 所 示 。 

发 光 滤 镜 和 模糊 滤 镜 相 比 ， 绝 大 多 数 参 数 设置 都 是 相同 的 ， 唯 独 多 出 一 项 【内 发 光 】 
选项 ， 用 于 定义 发 光 的 范围 为 对 象 轮廓 以 内 。 

4. 渐变 发 光 滤 镜 

渐变 发 光 滤 镜 是 对 发 光 滤 镜 的 增强 。 普 通 发 光 滤 镜 只 能 向 四 周 发 散 某 一 种 颜色 的 浙 
淡 颗粒 ， 无 法 对 这 种 渐 淡 的 颜色 进行 更 加 复杂 的 设置 ， 而 渐变 发 光 滤 镜 则 可 以 为 发 光 的 
效果 应 用 更 丰富 的 颜色 ， 以 及 更 多 的 色相 ， 使 得 发 光 的 效果 更 加 丰富 ， 如 图 5-19 所 示 。 


证 -心中 Do je] 本 必 中 [io Js]| 


《了 图 5-18_ 发光 滤 镜 和 图 5-19 ,渐变 发 光 滤 镜 


Flash 允许 设计 者 为 渐变 发 光 滤 镜 定 义 两 种 特殊 的 参数 设置 ， 即 渐变 发 光 的 【类 型 】 
和 【渐变 】， 其 作用 如 表 5-7 所 示 。 
3 表 5-7 。 渐变 发 光 滤 镜 的 特殊 参数 设置 
参 数 
内 测 
外侧 
| 全 部 _ 


将 渐变 发 光 的 效果 应 用 到 对 象 轮 廊 内 部 
将 渐变 发 光 的 效果 应 用 到 对 象 轮廓 外 部 
将 渐变 发 光 的 效果 同时 应 用 到 对 象 的 内 部 和 外 部 
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定义 发 光 的 渐变 颜色 ， 其 左 侧 为 完全 透明 ， 右 侧 则 为 不 透明 ， 设 计 者 可 以 单 击 渐变 
预览 区 域 任意 位 置 添加 一 个 取 色 点 ， 定 义 一 个 新 的 渐变 色 


5. 和 斜 角 滤 镜 


和 斜 角 滤 镜 可 以 向 对 象 应 用 加 亮 效果 ， 使 其 看 起 来 凸 出 于 背景 表面 。 在 Flash 中 ， 此 
滤 镜 功 能 多 用 于 按钮 元 件 或 需要 显示 为 立体 效果 的 其 他 动画 元 素 ， 如 图 5-20 所 示 。 

斜 角 滤 镜 的 参数 在 投影 的 基础 上 ， 添 加 了 【阴影 】 和 【加 亮 显 示 】 两 个 参数 ， 如 表 
5-8 所 示 。 


S23 表 5-8_, 和 斜 角 滤 镜 的 参数 设置 


斜 角 滤 镜 也 可 以 定义 类 型 以 规定 高 亮 区 域 和 投影 区 域 的 位 置 ， 其 具体 使 用 方法 与 渐 
变 发 光 滤 镜 类 似 ， 限 于 篇 幅 在 此 将 不 再 獒 述 。 


6. 渐变 斜 角 滤 镜 


渐变 斜 角 滤 镜 是 渐变 发 光 滤 镜 和 斜 角 滤 镜 的 结合 产物 ， 其 产生 一 种 凸 起 效果 ， 使 得 
对 象 看 起 来 好 像 从 背景 上 凸 起 ， 且 和 斜 角 表面 有 渐变 颜色 。 渐 变 斜 角 同样 要 求 渐变 中 间 有 
一 种 颜色 的 Alpha 值 为 0， 如 图 5-21 所 示 。 


/了 图 5-20 . 匀 角 滤 镜 /了 图 5-21 .渐变 冬 角 沪 镜 

渐变 斜 角 滤 镜 的 【渐变 】 参 数 默认 即 具 有 三 个 取 色 点 ， 其 Alpha 透明 度 为 “0%”、 
“0%” 和 “100%”, 设计 者 可 以 增添 多 种 渐变 颜色 , 但 是 这 三 个 透明 度 值 是 无 法 修改 的 。 

7、 调整 颜色 滤 镜 

调整 颜色 滤 镜 的 作用 是 设置 对 象 的 各 种 色彩 属性 ， 在 不 破坏 对 象 本 身 填 充 色 的 情况 
下 ， 转 换 对 象 的 颜色 ， 以 满足 动画 设计 的 需求 ， 其 本 质 是 将 Flash 动画 元 素 的 “亮度 ”、 
“色调 ”、“ 高 级 ”等 三 个 色彩 效果 合并 起 来 ,通过 综合 的 滤 镜 属性 来 改变 动画 元 素 的 色 
彩 ， 如 图 5-22 所 示 。 


和 图 5-22_ 调整 颜色 滤 镜 

调整 颜色 滤 镜 具备 的 4 个 参数 设置 都 是 面向 颜色 变换 的 , 其 具体 作用 如 表 5-9 所 示 。 
和 表 5-9 ,调整 颜色 滤 镜 的 参数 设置 
数 


调整 对 象 的 明亮 程度 ， 其 值 范围 是 -100 一 100， 默 认 值 为 0。 当 亮度 为 -100 时 ， 对 象 被 显 
示 为 全 黑色 。 而 当 亮 度 为 100 时 ， 对 象 被 显示 为 白色 

调整 对 象 颜色 中 黑 到 白 的 渐变 层次 ， 其 值 范围 是 -100 一 100， 默 认 值 为 0。 对 比 度 越 大 ， 
则 从 黑 到 白 的 渐变 层次 就 越 多 ， 色 彩 越 丰富 。 反 之 ， 则 会 使 对 象 给 人 一 种 灰 蒙蒙 的 感觉 


调整 对 象 颜色 的 纯度 , 其 值 范围 是 -100 一 100,， 默认 值 为 0。 饱和 度 越 大 , 则 色彩 越 丰富 ， 
如 饱和 度 为 -100， 则 图 像 将 转换 为 灰 度 图 

色彩 的 相貌 ， 用 于 调整 色彩 的 光谱 ， 使 对 象 产生 不 同 的 色彩 ， 其 值 范围 是 -180 一 180， 
默认 值 为 0。 例如， 原 对 象 为 红色 ， 将 对 象 的 色相 增加 60， 即 可 转换 为 黄色 


制作 动画 


Flash 是 一 款 优秀 网 页 动画 设计 软件 。 它 是 一 种 交互 式 动画 设计 工具 , 用 它 可 以 将 音 
乐 、 声 效 、 动 画 以 及 富有 新 意 的 界面 融合 在 一 起 ， 以 制作 出 高 品质 的 网 页 动态 效果 。 


人 类 的 肉眼 具有 “视觉 暂 留 ” 的 特性 ， 即 人 在 使 用 肉眼 捕捉 外 部 光线 ， 到 在 视网膜 
形成 视觉 的 行为 具备 一 定 的 滞后 性 ， 每 次 形成 的 视觉 至 少 会 在 视网膜 停留 0.034 秒 〈 约 
29.41 分 之 一 秒 ) 才 会 消失 。 

这 一 特性 使 得 静态 的 图 片 能 够 通过 一 些 特殊 的 手段 在 人 的 肉眼 视觉 下 动 起 来 ， 形 成 
具有 动感 的 画面 。 应 用 这 一 特性 ， 需 要 将 若干 具有 细微 差距 的 图 片 按照 顺序 排列 播放 ， 
每 一 幅 这 样 的 图 片 被 称 作 一 个 “ 帧 ”， 这 种 以 大 量 帧 构成 的 动态 图 片 技术 被 称 作 逐 帧 动 
画 。 电 影 、 电 视 以 及 最 初 的 动画 基本 上 都 属于 逐 帧 动画 。 

在 逐 帧 动画 的 播放 过 程 中 ， 帧 的 播放 速度 直接 关系 到 播放 的 效果 ， 每 一 秒 播放 的 帧 
数 就 是 动画 的 帧 频 〈 针 对 计算 机 屏幕 的 帧 频 又 被 称 作 刷 新 频率 ) 。 基 于 “视觉 暂 留 ” 特 
性 ， 如 果 帧 频 超 过 29.41 帧 / 秒 ， 则 这 些 画面 就 会 在 人 的 视网膜 形成 一 个 完整 地 、 毫 无 迟 
滞 感 的 连贯 动态 效果 。 绝 大 多 数 电影 、 电 视 采 用 的 帧 频 就 是 29.9 帧 / 秒 ， 略 超过 “视觉 
停留 ”的 最 低 限 度 。 
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1. 传统 动画 


传统 动画 片 是 通过 画笔 画 出 一 张 张 具有 细微 变化 的 连续 图 像 ， 经 过 摄影 机 或 者 摄像 
机 拍摄 ， 然 后 再 根据 指定 的 刷新 频率 连续 播放 而 形成 ， 如 图 5-23 所 示 。 


点 图 5-23 传统 动画 


由 于 传统 动画 的 画 帧 需要 人 工 绘制 ， 每 一 幅 画 帧 都 需要 耗费 较 高 的 成 本 ， 设 计 者 通 
常 以 24 帧 / 秒 的 刷新 频率 来 设计 动画 ， 这 一 频率 基本 略 低 于 人 类 肉眼 捕 提 信息 的 速度 ， 
但 是 有 能 够 勉强 满足 动画 的 流程 度 ， 被 称 作 “ 全 画幅 ”。 

一 些 低 成 本 的 动画 往往 会 采用 更 低 的 刷新 频率 来 设计 ， 诸 如 18 帧 / 秒 乃 至 12 帧 / 秒 
等 ， 被 称 作 3/4 画幅 和 半 画 幅 等 。 这 些 低 刷新 频率 的 动画 往往 可 以 通过 较 低 的 成 本 获得 
尚 可 的 播放 效果 。 


2. 计算 机 动画 


计算 机 技术 为 动画 的 设计 带 来 了 新 的 突破 ， 由 于 计算 机 具备 较 强 的 数学 演算 与 分 析 
能 力 ， 可 以 根据 设计 者 绘制 的 两 个 较为 重要 的 帧 〈 被 称 作 关键 帧 ) 来 进行 计算 ， 自 动 补 
充 这 两 个 帧 之 间 的 内 容 〈 这 种 行为 被 称 作 计算 机 自动 补 问 ， 简 称 补 间 ， 使 用 这 一 技术 来 
制作 的 动画 被 称 作 补 间 动 画 )》 ， 极 大 地 降低 了 动画 制作 的 成 本 。 

随 着 计算 机 图 形 学 、 各 种 编 成 脚本 技术 在 动画 设计 领域 的 应 用 ， 如 今 的 计算 机 技术 
已 经 可 以 用 更 低 的 成 本 来 设计 出 更 丰富 的 动画 内 容 ， 如 图 5-24 所 示 。 


和 图 5-24 计算机 动画 


时 间 轴 是 Flash 为 动画 设计 者 提供 的 一 种 重要 工具 , 其 将 动画 播放 的 时 间 、 画 幅 ( 帧 ) 
和 图 层 等 重要 元 素 结合 起 来 ,为 设计 者 提供 可 视 化 操作 、 设 计 动 画 的 工具 , 在 默认 的 Flash 
工作 区 布局 下 ，【 时 间 轴 】 面 板 会 显示 在 Flash 文档 窗口 下 方 ， 如 图 5-25 所 示 。 


生 图 5-25 【时 间 轴 】 面 板 
Flash 时 间 轴 面板 主要 分 为 左右 两 个 部 分 ， 即 左 侧 的 【图 层 】 操 作 区 和 右 侧 的 【 帧 】 


操作 区 。 
1. 图 层 操 作 区 


图 层 操作 区 的 作用 是 为 设计 者 提供 Flash 图 

层 的 编辑 、 操 作 以 及 显示 功能 ， 如 图 5-26 所 示 。 有 汪 
图 层 操作 区 主要 分 为 三 个 部 分 ， 其 最 上 方 后 症 各 下 和 x1 
为 图 层 属性 编辑 区 ， 中 问 为 图 层 预览 区 ， 底 部 KJ 图 5_26 图 层 操作 区 

则 为 图 层 编辑 区 。 

(1) 图 层 属性 编辑 区 

图 层 属性 编辑 区 用 于 编辑 所 有 图 层 的 三 种 属性 , 其 提供 了 三 个 按钮 , 如 表 5-10 所 示 。 
3 表 5-10。 图 层 属性 编辑 区 的 按钮 


好 
将 所 有 图 层 显 示 为 轮 席 下 所 有 图 层 以 轮 廊 的 方式 显示 或 完整 显示 轮廓 


任意 单 击 其 中 一 个 按钮 , 即 可 改变 影片 中 所 有 图 层 的 状态 ( 谈 单 层 和 被 迹 单 层 除外 ， 
这 两 种 图 层 总 是 显示 为 锁定 状态 ) 。 

(2) 图 层 预览 区 

图 层 预 览 区 可 以 显示 当前 影片 包含 的 所 有 图 层 ， 并 允许 用 户 编辑 图 层 的 类 型 和 基本 
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属性 。Flash CC 支持 7 种 类 型 的 图 层 ， 并 允许 设计 者 通过 图 层 文件 夹 的 方式 来 对 图 层 进 
行 组 织 管理 ， 如 表 5-11 所 示 。 
E22 表 5-11 Flash CC 的 图 层 类 型 
图 标 ”图 层 类 型 
国 普通 图 层 


普通 图 层 是 指 普通 状态 的 图 层 ， 这 种 类 型 的 图 名 称 的 前 面 将 出 现 普通 图 层 
图 标 

在 引导 层 中 可 以 设置 运动 路 径 ， 用 来 引导 被 引导 层 中 的 图 形 对 象 引导 运动 
路 标 。 在 引导 层 未 与 被 引导 层 建 立 关 联 时 ， 显 示 为 丁字 尺 图 标 

已 与 被 引导 层 关联 的 引导 层 被 显示 为 由 点 构成 的 运动 轨迹 图 标 

该 图 层 与 其 上 面 的 引导 层 相辅相成 ， 当 上 一 个 图 层 被 设 定 为 引导 层 时 ， 这 
个 图 层 会 自动 转变 成 被 引导 层 ， 并 且 图 层 名 称 会 自动 进行 缩 拓 

是 指 放置 迹 军 物 的 图 层 ， 该 图 层 是 利用 本 图 层 中 的 谈 电 物 来 对 下 面 图 层 的 
被 谈 畦 物 进行 迹 挡 

该 图 层 是 与 这 尝 层 对 应 的 、 用 来 放 息 被 这 曙 物 的 疼 层 
补 间 层 该 图 层 用 于 存放 基于 各 种 类 型 补 间 的 动画 元 素 

主要 用 于 组 织 和 管理 图 度 ， 其 内 可 以 包含 各 种 其 他 图 层 或 图 度 文件 


在 图 层 预览 区 ， 设 计 者 可 以 直接 拖 电 图 层 或 图 层 目录 ， 以 更 改 其 相互 的 从 属 关 系 和 
层级 关系 。 同 时 ， 设 计 者 也 可 以 在 选 定 图 层 或 图 层 目录 之 后 ， 右 击 鼠 标 来 对 其 进行 各 种 
编辑 操作 ， 如 插入 新 图 层 、 删 除 图 层 、 复 制 、 粘 贴 、 剪 切 等 。 

(3) 图 层 编辑 区 

图 层 编辑 区 为 设计 者 提供 了 三 个 按钮 ， 依 次 为 【新 建 图 层 】 按 钮 辟 、【 新 建文 件 夹 】 
按钮 轩 和 【删除 】 按 钮 古 ， 用 于 建立 新 图 层 、 新 图 层 文件 夹 以 及 删除 所 选 的 图 层 或 图 
层 文件 夹 等 。 


2. 帧 操作 区 


帧 操作 区 的 作用 是 显示 当前 Flash 影片 各 
图 层 中 的 帧 ， 包 括 普通 的 空 帧 、 关 键 帧 以 及 补 
间 帧 等 ， 这 些 帧 会 按照 时 间 的 顺序 和 图 层 的 层 
霉 关 系 来 显示 ， 如 图 5-27 所 示 。 图 5-27 帧 操作 区 

帧 操作 区 分 为 上 下 两 个 部 分 ， 上 半 部 分 显 
示 当 前 帧 的 编号 以 及 各 图 层 中 帧 的 内 容 状 况 ， 设 计 者 可 以 在 该 区 域内 单 击 选择 图 层 的 空 
白 位 置 或 某 一 帧 ， 右 击 鼠 标 执 行 对 应 的 命令 ， 以 对 帧 进行 处 理 ， 其 主要 支持 以 下 几 种 帧 
处 理 命令 ， 如 表 5-12 所 示 。 
3 表 5-12, 时间 轴 帧 操作 区 的 帧 处 理 命令 


引导 层 


被 达 音 层 


在 当前 位 置 插入 一 个 普通 帧 (如 选择 的 位 置 为 空白 位 置 ， 则 会 将 当前 图 层 的 最 
后 一 帧 到 该 位 置 之 间 所 有 空白 位 置 转换 为 普通 帧 ) 
删除 当前 所 选 的 帧 。 如 果 当 前 所 选 的 帧 不 是 当前 图 层 最 后 一 帧 ， 删 除 这 些 帧 之 


插入 帧 


本 人 后 所 有 这 些 帧 之 后 的 帧 依次 向 左 侧 移动 
在 当前 位 置 插入 一 个 关键 帧 〈 该 帧 会 白 动 复制 其 之 前 最 后 一 个 关键 帧 的 内 容 ， 
插入 关键 帧 如 选择 的 位 置 为 空白 位 置 , 则 会 将 当前 图 层 的 最 后 一 帧 到 该 位 置 之 间 所 有 空白 


位 置 转换 为 普通 帧 ? 


续 表 


二 作 用 
插入 空白 关键 帧 在 当前 位 置 插入 一 个 空白 关键 帧 (如 选择 的 位 置 为 空白 位 置 ， 则 会 将 当前 图 层 
的 最 后 一 帧 到 该 位 置 之 间 所 有 空白 位 置 转换 为 普通 帧 》 
清除 关键 帧 清除 所 选 关键 帧 中 的 内 容 ， 使 之 变 成 空白 关键 帧 
如 所 选 帧 为 普通 帧 ， 则 会 直接 将 其 转换 为 关键 帧 ， 并 复制 之 前 最 后 一 个 关键 帧 
转换 为 关键 帧 的 内 容 ， 或 保留 当前 帧 补 间 的 状态 ;如 所 选 位 置 为 空白 ， 则 其 作用 与 【插入 关 


键 帧 】 命 令 相同 
如 所 选 帧 为 普通 帧 、 关 键 帧 、 空 白 关键 帧 ， 则 会 直接 将 其 转换 为 空白 关键 帧 ， 


转换 为 室 白 关键 帧 | 如 所 选 位 置 为 空白 ， 则 其 作用 与 【插入 空白 关键 帧 】 相 同 
前 切 由 前 切 当前 巾 
复制 居 复制 当前 巾 
村 由 由 将 前 切 或 复制 的 帧 煌 由 到 当前 位 置 ， 并 将 之 后 所 有 的 帧 癌 石 移动 
清除 由 将 所 选 的 普通 帧 、 关 刍 帧 转换 为 空 碧 关键 由 号 
选择 所 有 由 选中 当前 图 层 所 有 由 5 
章 
帧 操作 区 下 半 部 分 则 提供 了 一 批 功能 按钮 ， 辅 助 设计 者 对 帧 进行 各 种 预览 或 编辑 操 设 
作 ， 其 作用 如 表 5-13 所 示 。 计 
5 表 5-13。 帧 操作 区 的 按钮 作用 互 
按钮 名 称 作用 电 
回 转 到 第 一 由 快速 将 焦点 转 至 当前 时 间 轴 第 二 帧 处 
回 将 焦点 转 至 当 亲 帆 的 订 一 帆 《 砚 曲 的 帆 ) 
国 播放 从 当前 焦点 开始 播放 时 间 轴 
国 将 焦点 转 到 当前 帧 的 后 一 帧 《更 晚 的 惰 ) 
回 转 到 最 后 一 帧 ” ”| 快速 将 焦点 转 至 当前 时 间 轴 最 后 一 个 有 效 帧 处 
赂 将 当前 焦点 帧 显示 于 帧 操作 区 水 平 中 央 位 置 
和 在 当前 时 间 铺 的 有 效 由 中 获取 一 个 连续 由 的 集合 ， 在 播放 果 从 该 信 
合 的 起 始 帧 到 结束 帧 之 间 循 环 播放 
在 当前 时 间 辆 的 有 效 帆 中 获取 一 个 连续 顺 的 集合 ， 在 振 个 上 显示 过 
吕 些 连续 帧 的 逐 帧 效果 
”| 在 当前 时 间 轴 的 有 效 帆 中 获取 一 个 连续 帧 的 集合 ， 在 舞 侣 上 以 轮 席 
四 绘图 纸 外 观 轮廓 。 | 的 方式 显示 这 些 连 续 帧 的 逐 帧 效果 
在 当前 时 间 辆 的 有 效 帧 中 获取 二 个 连续 闫 的 集合 ， 批 量 对 这 亚 由 还 
阿 | 编辑 多 个 由 人 
同 修改 标记 对 连续 帧 的 集合 标记 进行 修改 
当前 由 当前 怖 的 编号 
帧 速 当前 帧 频 值 
运行 时 间 当前 帧 在 整 不 情 片 中 的 播放 时 间 记 
加 视图 中 放 入 砚 多 帧 | 缩小 由 控 作 区 中 帧 的 也 览 尺寸 ， 使 时 间 辆 同时 蝇 示 页 多 芍 天 
加 视图 中 放 入 较 少 帆 | 放大 由 操作 区 中 幅 的 预览 尺寸， 使 时间 辆 同时 显示 较 消 的 由 


在 帧 操作 区 中 ， 设 计 者 可 以 直接 修改 当前 帧 值 或 运行 时 间 值 ， 将 焦点 置 于 对 应 的 帧 
位 置 ， 也 可 以 直接 修改 帧 速率 值 ， 更 改 当前 场景 的 帧 频 ， 提 升 或 降低 帧 播放 的 速度 。 


补 间 动 画 是 Flash 根据 两 个 关键 帧 之 间 动 画 元 素 的 变化 趋势 进行 运算 ， 从 而 形成 的 
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一 种 动画 类 型 。 在 Flash CC 中 ， 人 允许 设计 者 通过 动画 元 本 
件 的 位 置 、 缩 放 、 倾 斜 、 旋 转 、 颜 色 以 及 滤 镜 等 条 件 来 
创建 补 间 动画 。 | 

在 创建 补 间 动 画 时 ， 需 要 在 指定 的 图 层 内 放 管 若干 Ee 
影片 剪辑 元 件 ， 然 后 再 在 【时 间 轴 ]】 面板 中 选中 该 图 层 ， 
右 击 鼠 标 ， 执 行 【创建 补 间 动 画 】 命 令 ， 将 图 层 更 改 为 
补 间 图 层 ， 如 图 5-28 所 示 。 

在 执行 此 命令 之 后 ， 该 图 层 中 所 有 的 帧 都 会 被 转换 Ee 
为 薄荷 色 (#B0D6FF ) 以 示 与 其 他 类 型 图 层 的 灰色 上 | 
(#AFAFAF) 的 区 别 ， 如 图 5-29 所 示 。 

在 创建 补 间 动 画 之 后 ， 设 计 者 可 以 在 时 间 轴 中 选择 《了 图 5-28 ,创建 补 间 动 画 
起 始 关键 帧 之 后 任意 某 一 帧 ， 右 击 鼠 标 ， 执 行 【插入 关 
键 帧 】 命 令 ， 在 弹出 的 菜单 中 选择 补 间 的 类 型 ， 创 建 对 应 类 型 的 补 间 动 画 ， 如 图 5-30 
所 示 。 


和 图 5-29 . 补 间 图 层 和 图 5-30 。 插 入 对 应 类 型 的 关键 帧 


如 果 设 计 者 需要 创建 的 是 简单 的 单 种 类 型 补 问 动画 , 可 直接 执行 【位 置 】 【缩放 】、 
【倾斜 】、【 旋 转 】、【 颜 色 】 以 及 【 滤 镜 】 等 命令 ， 如 果 需 要 创建 复杂 的 多 种 类 型 补 间 
动画 ， 则 可 以 执行 【全 部 】 命 令 ， 允 许 补 间 所 有 类 型 的 动画 条 件 。 

以 最 常见 的 “位 置 ” 类 型 补 间 动 画 为 例 ， 在 创建 了 基于 位 置 的 关键 帧 之 后 ， 设 计 者 
可 以 选中 新 创建 的 补 间 关 键 帧 ， 然 后 在 舞台 中 拖 忠 该 图 层 内 的 动画 元 件 ， 完 成 基于 位 置 
的 补 间 动 画 制作 ， 如 图 5-31 所 示 。 


补 间 形 状 是 基于 两 个 不 同形 状 对 象 之 间 的 变化 过 程 ， 其 原理 是 通过 对 这 两 个 不 同形 
状 的 贝 塞 尔 曲线 公式 来 进行 数学 计算 ， 取 得 这 些 形 状 对 象 变化 的 函数 趋势 。 补 间 形 状 动 
画 是 基于 形状 的 ， 因 此 在 创建 此 类 动画 时 不 需要 通过 元 件 来 实现 。 

创建 补 间 形 状 的 方式 与 创建 补 间 动 画 有 所 区 别 ， 需 要 设计 者 先 在 动画 的 起 始 关 键 帧 
中 绘制 形状 ， 然 后 在 【时 间 轴 】 面 板 中 选择 需要 转换 为 结束 关键 帧 的 帧 ， 右 击 鼠 标 ， 执 
行 【转换 为 关键 帧 】 命 令 ， 如 图 5-32 所 示 。 

然后 ， 即 可 在 该 关键 帧 中 对 需要 变化 的 形状 进行 修改 ， 诸 如 拖 动 其 端点 、 修 改 其 轮 
廓 、 颜 色 等 ， 如 图 5-33 所 示 。 
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和 图 5-32 转换 关键 帧 在 了 图 5-33 绘制 变化 目标 形状 


在 时 间 轴 面板 中 选择 两 个 关键 帧 中 任意 一 个 普通 帧 ， 右 击 鼠 标 ， 执 行 【创建 补 间 形 
状 】 命 令 ， 即 可 将 两 个 关键 帧 中 的 普通 帧 都 转换 为 补 间 形状 帧 ， 使 之 变 成 浅 绿色 
(#C6F7C6) 以 示 与 其 他 类 型 图 层 的 灰色 (#AFAFAF) 的 区 别 ， 如 图 5-34 所 示 。 

在 创建 形状 补 间 时 , 设计 者 也 可 以 在 其 结束 关键 帧 中 重新 绘制 一 个 形状 , Flash 会 自 
动 计算 两 个 形状 之 间 的 差别 ， 生 成 形状 补 间 帧 。 
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早期 的 Flash 补 间 动 画 在 处 理 元 件 的 位 置 运动 动画 时 ， 只 能 根据 起 始 关 键 帧 和 结束 
关键 帧 之 间 元 件 的 距离 ， 制 作 匀速 直线 运动 的 动画 。 

为 了 解决 动画 元 件 的 曲线 运动 问题 , Flash 提供 了 名 为 引导 动画 的 动画 类 型 , 其 原理 
就 是 在 一 个 特殊 图 层 〈 引 导 层 ) 中 绘制 一 条 直线 或 曲线 (被 称 作 引 导线 ) ， 然 后 在 补 间 
层 的 起 始 关键 帧 、 结 束 关键 帧 中 将 动画 元 件 与 引导 线 的 两 端 分 别 绑 定 ， 从 而 使 动画 元 件 
能 够 按照 引导 线 的 轨迹 来 运动 。 

随 着 Flash 补 间 动 画 的 改进 ， 如 今 普 通 位 置 补 间 动 画 已 经 可 以 提供 运动 轨迹 的 编辑 ， 
因此 引导 动画 逐渐 被 补 间 动 画 所 取代 ,但 Flash CC 仍然 保留 了 引导 动画 这 一 功能 ， 以 及 
与 之 相 结合 的 传统 补 间 动 画 等 功能 。 

在 Flash 中 创建 引导 动画 ， 首 先 需要 在 包含 元 件 的 图 层 上 方 新 建 一 个 空白 图 层 ， 在 
该 图 层 标签 上 右 击 鼠标 ， 执 行 引导 层 命令 ， 如 图 5-35 所 示 。 


-re lm 
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生 图 5-34 ,创建 形状 补 间 和 图 5-35 ,制作 引导 层 


然后 ， 即 可 选中 要 绑 定 关联 关系 的 被 引导 层 ， 将 其 向 引导 层 下 方 拖 动 ， 直 至 在 引导 层 
下 方 显 示 出 一 个 由 圆 形 和 横 线 组 成 的 辅助 标记 ， 松 开 鼠 标 ， 即 可 完成 关联 ， 如 图 5-36 所 示 。 
在 建立 了 引导 关联 之 后 ， 设 计 者 即 可 扩展 两 个 图 层 的 时 间 轴 帧 数 ， 并 在 引导 层 绘制 
引导 线 ， 如 图 5-37 所 示 。 


可 白 | | 守 记 | 甸 I re 
人 图 5-36 ,建立 引导 关联 和 图 5-37 ,扩展 时 间 轴 并 绘制 引导 线 
在 被 引导 层 的 起 始 关键 帧 中 制作 动画 元 件 ， 创 建 结束 关键 帧 ， 使 起 始 关键 帧 和 结束 


FOTO 


发 图 5-38 。 创 建 关键 帧 和 动画 元 件 


选择 起 始 关键 帧 ， 拖 动 该 帧 内 的 动画 元 件 ， 将 元 件 的 中 心 点 《十字 标记 ) 拖 动 至 引 
导线 的 其 中 一 个 端点 ， 待 出 现 圆 形 绑 定 标记 后 松 开 鼠 标 ， 如 图 5-39 所 示 。 

选择 结束 关键 帧 ， 用 同样 的 方式 将 该 关键 帧 内 的 动画 元 件 与 引导 线 另 一 侧 端 点 相 绑 
定 ， 如 图 5-40 所 示 。 


ET 


《了 图 5-39 。 绑 定 引 导线 一 侧 端点 和 图 5-40 。 绑 定 引 导线 另 一 侧 端点 


最 后 ， 选 择 被 引导 层 两 个 关键 帧 之 间 任 意 一 帧 ， 右 击 鼠 标 执行 【创建 传统 补 间 】 命 
令 ， 即 可 完成 引导 动画 的 制作 ， 如 图 5-41 所 示 。 


5.4 课堂 练习 : 节约 用 水 广告 设计 


节约 用 水 广告 属于 公益 广告 的 一 个 到 
方面 ， 其 目的 是 号 召 人 们 对 水 资源 的 珍 
惜 。 在 设计 该 广告 时 ， 水 是 整个 动画 的 主 Ee 
角 ， 也 是 所 要 表现 的 主题 。 因 此 ， 广 告 以 专 

水 龙头 “ 哗 唑 ”流水 为 开场 ， 给 浏览 者 一 3 
种 视觉 上 的 刺激 ， 从 而 产生 较为 深刻 的 印 3 
象 。 最 后 ， 以 黑色 背景 为 衬托 突出 “节约 

用 水 ， 从 我 做 起 ”的 宣传 口号 ， 如 图 5-42 

所 示 。 在 了 图 5-41 ,创建 引导 动画 的 补 间 
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和 图 5-42 ,节约 用 水 广告 


操作 步骤 : 

新 建 680 像素 x 550 像素 的 空白 文档 , 将 绘 
制 好 的 “背景 ”图 形 拖 入 到 舞台 ,并 将 其 转 
换 为 图 形 元 件 ， 如 图 5-43 所 示 。 


: 


[了 图 5-43_ 拖 入 背景 图 像 


新 建 “ 水 池 ” 图 层 ， 在 舞台 的 左下 角 绘 制 一 
个 “水 池 ” 图 形 ， 并 将 其 转换 为 图 形 元 件 ， 


如 


图 


5-44 所 示 。 
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和 _ 图 5-44_ 绘 制 水 池 


新 建 “ 水 龙头 ”图 层 ， 在 水 池 的 左 侧 绘制 一 


个 “水 龙头 ” 图 形 , 并 
如 图 5-45 所 示 。 


新 建 “ 流 水 [动画 ]” 影 片 剪 辑 元 件 ， 在 舞 


中 绘制 一 个 “水 流 ” 
形 元 件 ， 如 图 5-46 


将 其 转换 为 图 形 元 件 ， 
合 
图 形 ， 并 将 其 转换 为 图 


所 示 。 
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和 图 5-45 。 绘 制 水 龙头 re 


EE 可 


5-46 ,绘制 水 流 图 形 


在 第 3 帧 处 插入 空白 关键 帧 , 在 舞台 的 相同 


goa il 


位 置 绘制 “ 水 流 ” 的 另 一 状态 图 形 ， 并 将 其 
转换 为 图 形 元 件 ， 如 图 5-47 所 示 。 


DIE 、 


长 了 图 5-47 。 绘 制 另 一 水 流 图 形 


划 


返回 场景 。 新 建 “ 流 水 ”图 层 , 将 “流水 [ 动 
画 ]” 影 片 剪辑 拖 入 到 舞 合 中 的 “水 龙头 ” 
处 ， 如 图 5-48 所 示 。 


TW 


和 图 5-48 。 拖 入 流水 影片 剪辑 


新 建 “ 水 面 ”影片 剪辑 元 件 ， 在 舞台 中 绘制 


一 个 四 边 形 ， 并 为 其 填充 蓝 白 渐 变色 ,如 图 
5-49 所 示 。 


< 


和 图 5-49 绘制 水 面 


加 在 第 6 帧 处 插入 关键 帧 ， 使 用 【 选择 工具 】 
加 向 外 调整 四 边 形 的 4 个 角 ， 使 其 产生 水 
面 上 升 的 效果 ， 如 图 5-50 所 示 。 
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图 使 用 相同 的 方法 , 在 第 6 帧 的 后 面 插入 多 个 
关键 帧 ， 并 调整 其 大 小 ， 效 果 如 图 5-51 
所 示 。 


返回 场景 。 在 “水 龙头 ”图 层 下 新 建 图 层 ， 
将 “水 面 ”影片 剪辑 拖 入 到 “水 池 ” 影 片 剪 
辑 的 上 面 ， 如 图 5-52 所 示 。 


和 _ 图 5-52 拖 入 水 面 影片 剪辑 


新 建 “ 水 波纹 ”影片 剪辑 ， 在 舞台 中 绘制 一 
个 “波纹 ”图 形 ， 然 后 插入 其 他 关键 帧 ， 并 
对 该 图 形 进行 修改 , 使 其 产生 水 波 流动 的 效 
果 ， 如 图 5-53 所 示 。 


《了 图 5-53 ,创建 水 波纹 动画 


加 返回 场景 。 新 建 “ 水 波纹 ”图 层 , 将“ 水波 
纹 ”影片 剪辑 拖 入 到 “水 面 ”的 中 间 ， 使 其 
与 水 流 冲击 下 的 位 置 相 对 应 ， 如 图 5-54 
所 示 。 


一 一 一 


发 了 图 5-54 。 拖 入 水 波纹 影片 剪辑 


新 建 “黑幕 ”图 层 ， 在 第 90 帧 处 插入 关键 
帧 , 绘制 一 个 与 舞台 大 小 相同 的 透明 黑色 甜 
形 。 然后 , 在 第 103 帧 处 插入 关键 帧 , 设置 
和 矩形 的 Alpha 值 为 75%， 并 创建 补 间 形状 
动画 ， 如 图 5-55 所 示 。 
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图 5-55 ,创建 黑幕 动画 


加 新 建 “文字 _1” 图 层 ,在 舞台 中 输入 “节约 
用 水 ”文字 ， 并 将 其 分 离 。 然 后 在 第 103 
帧 至 第 120 帧 之 间 制 作文 字 旋转 放大 的 补 
间 动画 ， 如 图 5-56 所 示 。 

葬 新 建 “文字 2” 图 层 , 使 用 相同 的 方法 在 第 
116 帧 至 第 130 帧 之 间 制 作 另 一 文字 的 旋转 
放大 动画 ， 如 图 5-57 所 示 。 


5.5 课堂 练习 : 制 


在 设计 日 出 特效 时 ， 可 以 使 用 Flash CC 自 带 的 各 种 滤 镜 为 绘制 的 太阳 添加 效果 。 例 如 ， 
添加 模糊 、 发 光 等 特效 ， 模 拟 日 出 时 太阳 发 射 的 各 种 光线 。 除 此 之 外 ， 还 可 以 为 远 处 的 各 种 
对 象 添加 模糊 滤 镜 ， 使 其 看 起 来 有 一 种 腾 肛 效果 ， 如 图 5-58 所 示 。 


5-58 日 出 特效 


Er 
Co 
a 


操作 步骤 : 

新 建文 档 , 并 设置 【文档 属性 ] 中 的 【尺寸 】 
为 1020px x 400px。 然 后 ,绘制 一 个 矩形 ， 
为 其 填充 渐变 颜色 ， 作 为 背景 图 像 ， 如 图 
5-59 所 示 。 


点 有 图 5-59 绘制 矩形 背景 


新 建 “ 太 阳 ” 图 层 ， 然 后 在 图 层 中 绘制 一 个 
圆 形 ， 填 充 “ 放 射 渐变 ”效果 以 作为 太阳 。 
再 按 F8 快捷 键 将 太阳 转换 为 影片 剪辑 元 
件 ， 如 图 5-60 所 示 。 


长 了 图 5-60 。 绘 制 太阳 并 转换 为 元 件 


选择 “太阳 ”元 件 , 在 【 属性 】 检查 器 中 打 
开 【 滤 镜 】 选项 卡 ， 为 元 件 添加 发 光 滤 镜 ， 
如 图 5-61 所 示 。 


和 图 5-61 .为 太阳 添加 滤 镜 
用 同样 的 方式 再 为 太阳 的 影片 剪辑 元 件 , 添 


加 一 个 红色 的 发 光 滤 镜 ， 如 图 5-62 所 示 。 


和 图 5-62 ,再 为 太阳 添加 发 光 小 镜 
为 太阳 的 影片 剪辑 元 件 添加 模糊 滤 镜 ,并 设 


和 图 5-63 ,为 太阳 添加 模糊 滤 镜 


加 新 建 “云层” 图 层 , 绘制 云彩 并 为 其 填充 颜 
色 ， 如 图 5-64 所 示 。 


和 图 5-64 ,绘制 云彩 并 填充 颜色 


新 建 “ 山 脉 ”图 层 ,绘制 远 处 的 山峰 ， 并 为 
其 填充 颜色 , 将 所 有 山峰 转换 为 影片 剪辑 元 
件 ， 如 图 5-65 所 示 。 

图 在 [ 属性] 检查 器 中 ,为 山峰 的 元 件 添加 模 
糊 滤 镜 ， 设 置 【 模糊 X】 和 【 模糊 Y 】 值 均 
为 “10”， 如 图 5-66 所 示 。 


和 | 图 5-65 ,绘制 山峰 并 填充 颜色 


上 


eg 


和 图 5-68 .添加 模糊 滤 镜 


新 建 “ 大 树 ” 图 层 ， 在 小 树 旁边 绘制 近 处 的 
大 树 ， 并 填充 颜色 ， 如 图 5-69 所 示 。 


罗斯 最 1 


第 
5 
章 
设 
计 
交 
动 
田 


国 "| | 


和 图 5-66 ,添加 模糊 小 镜 
图 新 建 “ 小 树 ” 图 层 , 绘制 山峰 附近 的 小 树 ， 


并 为 其 填充 颜色 。 将 几 棵 小 树 转换 为 影片 剪 
辑 元 件 ， 如 图 5-67 所 示 。 
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和 | 图 5-67 绘制 小 树 并 转换 颜色 


在 【 属性 ] 检查 器 中 为 小 树 的 元 件 添加 模糊 
滤 镜 , 设置 【 模糊 X ] 和 [ 模糊 Y ] 值 为 “3”， 
如 图 5-68 所 示 。 
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和 图 5-69 绘制 大 树 并 填充 颜色 


鹃 新建 “大 地 ”图 层 ， 在 图 层 中 绘制 一 个 矩形 
并 填充 颜色 ， 作 为 大 地 ， 如 图 5-70 所 示 。 
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和 图 5-70 绘制 大 地 


区 将 大 地 转换 为 元 件 ， 然 后 为 其 添加 模糊 滤 
镜 ， 并 设置 【模糊 X】 值 为 “0”, 【模糊 Y】 
值 为 “3”， 如 图 5-71 所 示 。 


和 图 5-71 为 大 地 添加 模糊 滤 镜 


新 建 “ 房 屋 1” 图 层 ， 在 场景 左 侧 的 大 树 前 
导入 房屋 的 素材 ， 如 图 5-72 所 示 。 


一 图 丙 慑 1 


i oo 一 


和 图 5-72 导入 房屋 


新 建 “ 房 屋 2” 图 层 ， 在 场景 右 侧 再 导入 房 
屋 的 素材 ， 如 图 5-73 所 示 。 

新 建 “ 道 路 ”图 层 ， 在 大 地 上 绘制 道路 ， 并 
填充 颜色 ， 如 图 5-74 所 示 。 

将 道路 转换 为 影片 剪辑 元 件 , 然后 添加 模糊 
滤 镜 ,设置 【模糊 X】 值 为 “0”, 【模糊 Y】 
值 为 “3”， 即 可 完成 日 出 特效 的 制作 ,如 图 
5-75 所 示 。 


上 图 5-73_ 导 入 房屋 素材 


下 图 马 县 1 


E77===1 


和 图 5-75 为 道路 添加 滤 镜 


4. Flash 允许 使 用 、 


以 及 等 几 种 滤 镜 来 为 影 


5. Flash CC 允许 通过 动画 元 件 的 


一 、 填 空 题 
1. Flash 支持 以 及 
等 三 种 元 件 。 片 剪辑 元 件 和 按钮 元 件 添加 效果 。 
2. 图 形 元 件 的 作用 是 5 
以 及 ， 为 这 些 资源 和 内 容 
提供 最 基本 的 可 复 用 性 解决 方案 。 


3. 按钮 元 件 的 4 个 状态 帧 包括 i 
、 以 及 等 。 


以 及 等 条 件 


来 创建 补 间 动 画 。 
6. 补 间 形 状 的 原理 是 通过 对 这 两 个 不 同形 


状 的 来 进行 数学 计算 ， 取 得 这 些 形状 
对 象 变化 的 函数 趋势 。 


二 、 选 择 题 


1. 以 下 哪 种 元 件 无 法 被 导出 到 ActionScript 
脚本 的 实例 中  ? 
A. 图 形 元 件 
B. 影片 剪辑 元 件 
C. 按钮 元 件 
D. 动画 元 件 
加 被 限定 了 只 能 有 指定 数量 的 
帧 数 。 
.图 形 元 件 
.影片 剪辑 元 件 
.按钮 元 件 
动画 元 件 
3， 以 下 哪 种 样式 不 属于 色彩 效果 
? 
A. 亮度 
B. 色调 
© 
D 


DNmy 


. Alpha 
. 滤 镜 
4. 在 绘制 引导 线 时 ， 需 要 将 其 放置 到 哪 种 
图 层 中 ? 
A. 补 间 层 


B. 普通 图 层 
C. 引导 层 
D. 被 引导 层 
5. 以 下 哪 种 补 间 动 画 不 需要 依赖 动画 元 件 
? 
A. 补 间 动 画 
B. 谈 罩 动画 
C. 引导 动画 
D. 补 间 形 状 
6. 在 创建 基于 滤 镜 的 补 间 动 画 时 ， 需 要 首 
先 为 动画 元 件 添加 
A. 引导 线 
B. 遮 单 
C. 滤 镜 
D. 色彩 效果 


三 、 简 答题 


1. Flash 支持 哪些 类 型 的 动画 元 件 ? 这 些 动 
画 元 件 之 间 有 什么 区 别 ? 

2. 为 动画 元 件 添加 效果 有 什么 意义 ? 其 与 
直接 修改 动画 元 件 有 什么 区 别 ? 

3， 图 形 元 件 与 普通 的 图 形 对 象 之 间 有 什么 
区 别 ? 

4. 什么 是 补 间 动 画 ? 

5. 如何 操作 图 层 ? 


第 6 草 
制作 网 页 文档 


6.1 Dreamweaver 使 用 基础 


Dreamweaver 具有 使 用 简单 、 操 作 便 捷 等 特色 ， 特 别 适合 入 门 级 别 的 网 页 设计 工作 。 


Adobe Dreamweaver， 简 称 “DW”， 是 一 款 最 初 由 美国 Adobe System 公司 出 品 的 
网 页 设计 与 网 站 建设 套件 ， 其 提供 了 可 视 化 的 网 页 元 素 插入 、 编 辑 功 能 ， 以 及 较为 完善 
的 HTML、CSS 以 及 JavaScript 脚本 开发 辅助 工具 ， 可 以 帮助 网 页 设计 师 和 开发 者 实现 
完整 的 网 页 设计 与 网 站 建设 功能 ， 除 此 之 外 ，Dreamweaver 可 以 和 Adobe System 公司 出 
品 的 Photoshop、Fireworks、Flash 等 诸多 创意 工具 完美 地 结合 ， 共 同 协作 来 实现 网 页 设 
计 与 网 站 建设 工作 。 

1997 年 底 发 布 的 Dreamweaver 软件 向 开发 者 提供 了 基本 的 静态 网 页 可 视 化 编辑 功 
能 ， 人 允许 开发 者 通过 可 视 化 的 方式 制作 网 页 ， 向 网 页 中 插入 文本 、 图 像 、 表 格 、 表 单 等 
静态 网 页 元 素 ， 制 成 基本 的 网 页 。 

1999 年 6 月 ，Macromedia 公司 以 Dreamweaver 3.0 为 基础 ， 出 品 了 一 个 名 为 
Dreamweaver UltraDev1.0 的 Dreamweaver 系列 产品 , 首次 在 Dreamweaver 中 加 入 站 点 管 
理 功 能 ， 并 增添 了 动态 网 页 编辑 功能 ， 支 持 ASP、CGI 等 几 种 重要 的 动态 交互 技术 。 

2005 年 9 月 ，Macromedia 公司 出 品 了 Dreamweaver 8.0， 其 时 ，Dreamweaver 的 功 
能 已 经 相当 完善 ， 对 当时 的 网 页 标准 化 结构 语言 XHTML1.0、 标 准 化 表现 语言 CSS2.1 
以 及 标准 化 行为 语言 JavaScript 具备 了 完善 的 支持 ， 并 允许 开发 者 通过 Dreamweaver 来 
编写 基于 VBScript、ASP、PHP、Perl、Coolfusion、C# 等 多 种 编程 语言 的 富 交互 式 网 站 。 

2005 年 底 , Adobe System 公司 收购 了 Macromedia 公司 ,以 Macromedia Dreamweaver 
替代 Adobe Golive 软件 , 加 入 Adobe Creative Suite( 创 意 套件 ) 体 系 中 , 使 得 Dreamweaver 
正式 成 为 Adobe Creative Suite (创意 套件 ) 的 主打 产品 之 一 。 

随 着 移动 互联 网 技术 的 发 展 和 现代 Web 富 交 互 技 术 的 应 用 、 新 的 HTML 5 以 及 CSS 
3 等 Web 开发 标准 的 推广 ，Adobe 在 2011 年 开始 为 Dreamweaver 增加 更 多 丰富 的 网 页 
设计 与 开发 功能 ， 支 持 使 用 Dreamweaver 来 开发 新 标准 化 的 网 站 以 及 基于 移动 设备 的 富 
响应 式 交 互 网 站 。 

今天 的 Dreamweaver 增强 了 对 HTML 5、CSS 3 以 及 jQuery 脚本 框架 的 支持 ， 内 置 
了 大 量 基于 jQuery 框架 开发 的 富 交互 组 件 ， 并 增强 了 对 Adobe Photoshop 的 协作 功能 ， 
允许 在 Dreamweaver 中 直接 导入 Adobe Photoshop 创建 的 网 页 界面 设计 方案 ， 直 接生 成 
静态 网 页 ， 极 大 地 减轻 了 开发 者 的 切 图 负担 。 这 些 功 能 的 推出 ， 使 得 Dreamweaver 在 如 
今 的 网 页 开发 软件 市 场 上 具备 了 更 强 的 竞争 力 。 


Adobe 公司 在 引入 了 Creative Cloud 概念 (云端 创意 平台 ) 之 后 ， 对 Dreamweaver 
的 软件 界面 进行 了 较 大 的 改进 ， 默 认 采 用 Extract 工作 区 方案 以 展示 Dreamweaver CC 的 
最 新 功能 ， 满 足 现代 开发 者 的 实际 需求 ， 如 图 6-1 所 示 。 
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这 是 Dreamweaver 中 的 PSD。 
可 提取 有 助 于 将 您 的 复合 转化 为 是 近 浏览 的 文件 
代码 的 一 切 元 素 。 
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fF 图 6-1 _Dreamweaver CC 主体 界面 


Dreamweaver CC 的 主体 界面 相 比 Dreamweaver CS6 具有 较 大 的 改观 , 其 主要 分 为 4 
个 区 域 ， 即 标题 菜单 栏 、Extract 面板 、 文 档 窗口 以 及 压缩 面板 栏 等 。 


1. 标题 菜单 栏 


Dreamweaver CC 的 【标题 菜单 栏 】 延 续 了 Adobe Photoshop 以 及 Adobe Flash 的 整 
体 风 格 ， 整 合 了 普通 Windows 应 用 程序 的 标题 栏 与 菜单 栏 ， 在 其 最 左 侧 是 Dreamweaver 
的 软件 图 标 ， 然 后 是 10 个 菜单 选项 ， 如 表 6-1 所 示 。 
3 表 6-1 。 标题 菜单 栏 的 菜单 选项 


菜单 选项 作 用 
用 于 文件 级 别 的 操作 ， 包 括 网 页 文档 、 网 站 项 目的 打开 、 关 闭 、 保 存 以 及 资源 的 导入 、 


人 导出 、 浏 览 器 预览 、 标 准 的 验证 以 及 软件 的 退出 等 功能 
有 用 于 对 当前 所 迹 网 页 内 容 元 来 的 复制 、 芍 切 、 在 按 、 巷 换 入 由 、 册 除 ， 以 及 Dreamweaver 


自身 的 软件 环境 配置 等 

管理 当前 开发 环境 的 视图 拆 分 、 视 图 模式 、 代 码 或 预览 的 显示 方式 、 辅 助 工 具 等 
提供 各 种 可 插入 网 页 文档 的 网 页 元 素 、 组 件 、 内 容 元 素 、 模 板 等 

模板 、 超 链接 的 修改 ， 以 及 表格 、 图 像 、 列 表 的 编辑 ， 和 库 、 模 板 的 管理 
功能 

格式 提供 文本 、 段 落 的 样式 管理 ， 以 及 基本 的 HIML 文本 元 素 设置 、CSS 样式 表 管 理 
命令 提供 一 些 开发 环境 的 宏 命令 ， 并 管理 当前 所 有 创建 的 宏 

站 点 用 于 管理 Dreamweaver 站 点 ， 以 及 站 点 中 的 各 种 资源 与 文档 

窗口 管理 Dreamweaver 中 的 各 种 面板 和 工具 

帮助 提供 软件 的 帮助 信息 和 技术 支持 


【标题 菜单 栏 】 还 有 一 个 作用 就 是 在 右 侧 提供 工作 区 方案 的 选项 、Adobe CC 同步 工 
具 以 及 软件 的 使 用 向 导 功 能 。 在 默认 的 “Extract” 工 作 区 布局 下 ， 开 发 者 可 以 单 击 【 标 
题 菜 单 栏 】 右 侧 的 【管理 工作 区 】 按 钮 Es 时 到 ， 在 弹出 的 菜单 中 选择 工作 区 布局 方案 ， 
或 管理 当前 的 工作 区 ， 如 图 6-2 所 示 。 
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这 是 Dreamweaver 中 的 PSD。 


可 提取 有 助 于 将 您 的 复合 转化 为 
人 的 证 切 元 素 。 
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图 6-2 管理 工作 区 方案 


Adobe CC 相 比 旧 的 CS6 版 本 ， 最 大 的 特点 就 是 为 所 有 开发 者 提供 了 设置 、 内 容 等 
同步 功能 ， 在 单 击 【 管 理工 作 区 】 按 钮 蕊 88 时 于 右 侧 的 【同步 设置 】 按 钮 党 久之 后 ， 即 可 
在 弹出 的 菜单 中 查看 当前 登录 的 Adobe 账户 ， 并 同步 在 云 

在 【同步 设置 】 按 钮 察 右 侧 ，Dreamweaver 提供 了 


按钮 占 ， 单 击 此 按钮 即 可 跳 转 到 Dreamweaver 的 向 导 站 点 ， 


能 和 使 用 方法 。 
2.，Extract 面板 


【Extract】 面 板 是 Dreamweaver CC 新 增 的 一 个 功 
能 面板 ， 其 可 以 帮助 开发 者 直接 将 由 Adobe Photoshop 
创建 的 网 页 界面 方案 直接 导入 到 Dreamweaver 中 ， 并 
快速 生成 基于 HIML 5 和 CSS3 的 标准 化 代码 。 

同时 ， 开 发 者 也 可 以 通过 该 面板 预览 和 修改 
Dreamweaver 生成 的 代码 , 以 根据 网 页 界面 设计 方案 实 
现 更 丰富 的 网 页 效果 ， 如 图 6-3 所 示 。 


3. 文档 窗口 


【文档 窗口 】 的 作用 是 显示 当前 正在 编辑 的 网 页 文 
档 的 预览 , 或 网 页 文档 的 代码 , 同时 也 可 以 根据 开发 者 
4 实际 需求 来 对 网 页 文档 的 预览 和 代码 拆 分 显示 。 


于 为 开发 者 提供 一 些 快捷 功能 ， 如 图 6-4 所 示 。 
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学 习 Dreamweaver 的 各 种 功 


这 是 Dreamweaver 中 的 P: 


人 转化 为 
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6-3 _Extract 面板 


在 开启 Dreamweaver CC 之 后 ， 此 处 默认 会 显示 Dreamweaver CC 的 【开始 屏幕 】， 


Dreamweaver CC 的 【开始 屏幕 】 提 供 了 三 个 方面 的 功能 , 其 左 侧 【最 近 浏 览 的 文件 】 
二 Dreamweaver 支持 的 文档 ， 诸 如 各 种 代码 文档 、 文 本 文档 、 结 构 文档 

， 同 时 显示 已 经 打开 的 文档 历史 记录 ， 允许 开发 者 快速 打 这 些 曾 打开 的 文档 。 

【新 建 】 选 项 提供 了 一 些 常 用 的 网 页 文档 的 创建 快捷 方式 ， 以 及 【站 点 设置 ] 、【 流 
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体 网 格 】、【 启 动 器 模板 】 等 创建 向 导 的 链接 。 
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和 图 6-4__Dreamweaver CC 开始 屏幕 


【了 解 】 选 项 提供 了 Dreamweaver CC 新 增 功 能 、 功 能 视频 、 了 解 Dreamweaver、 帮 
助 和 支持 的 快捷 方式 ， 帮 助 开发 者 更 好 地 学 习 Dreamweaver 的 功能 和 使 用 方法 。 

关于 Dreamweaver 文档 窗口 的 其 他 用 法 ， 请 参考 之 后 管理 Dreamweaver【 工 作 区 】 
的 相关 小 节 。 


4. 压缩 面板 栏 


Dreamweaver CC 的 【压缩 面板 栏 】 作 用 与 Photoshop CC、Flash CC 类 似 ， 都 用 于 为 
开发 者 提供 某 些 工作 面板 的 快捷 按钮 ， 开 发 者 可 以 单 击 【 压 缩 面板 栏 】 中 的 各 种 按钮 ， 
展开 对 应 的 面板 来 进行 操作 。 


@-- 6.1.3 ”管理 Dreamweaver 工作 环境 ~ 

在 默认 状态 下 ，Dreamweaver CC 采用 “Extract” 工 作 区 方案 ,该 方案 主要 用 于 帮助 
网 页 设计 师 快 速 导 入 Photoshop 界面 设计 方案 ， 适 合 网 页 设计 师 来 使 用 ， 而 对 于 初学 者 
以 及 网 页 开发 者 而 言 ， 此 工作 环境 明显 受到 诸多 的 限制 。 

Dreamweaver 实际 上 还 提供 了 两 个 工作 环境 方案 ， 用 于 帮助 初学 者 和 网 页 开发 者 更 
好 地 进行 制作 和 开发 。 

1. “设计” 工作 环境 


“设计 ”工作 环境 方案 更 多 地 类 似 传统 的 Dreamweaver 工作 环境 ， 其 主要 面向 网 页 
设计 的 初学 者 ， 帮 助 初学 者 采用 更 多 可 视 化 的 方式 来 设计 网 页 的 元 素 。 
在 【标题 菜单 栏 】 中 单 击 【管理 工作 区 】 按钮 ES 可 ， 然 后 即 可 执行 【设计 】 命 令 ， 
以 采用 “设计 ”风格 的 【工作 区 】 方 案 ， 如 图 6-5 所 示 。 


Dw hh spare sa EA We os3O Wnts EOW Bn [Er en ot lol *] 
二 二 [DIE 
至 
sa+n 0 
TREE 
nr Sm 
E33 
[esse Re x we v 
家 尝 mn ~ ve 
ET en 
ME 


和 图 6-5 “设计 ”工作 环境 方案 
在 该 工作 环境 方案 下 ，【 文 档 窗口 】 位 于 主 界面 左上 方 ， 下 方 则 为 【属性 】 检 查 器 ， 
用 于 对 网 页 效果 预览 中 各 种 开发 者 选择 的 项 目 进 行 修改 和 定义 。 
在 主体 界面 右 侧 , “设计 ”工作 环境 方案 提供 了 几 个 重要 的 面板 ， 其 作用 如 表 6-2 所 示 。 
5 表 6-2 “设计 "工作 环境 方案 的 面板 集合 及 作用 
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以 可 视 化 的 方式 显 二 网 页 文档 所 调用 的 CSS 选择 器 ， 以 及 相关 的 选择 属性 
样式 ， 帮 助 开发 者 快速 编辑 网 页 元 素 的 样式 

显示 本 地 操作 系统 、 站 点 以 及 互联 网 站 点 中 的 文件 结构 ， 帮 助 开发 者 管理 网 站 
项 目 中 的 各 种 文件 

该 面板 类 似 Flash 的 【 库 】 面 板 ， 允 许 开发 者 将 网 站 设计 过 程 中 积累 的 资源 收藏 
起 来 ， 以 供 再 次 开发 时 快速 调用 

提供 各 种 网 页 元 素 的 可 视 化 插入 方式 

代码 片段 提供 各 种 编程 语言 的 常用 代码 库 ， 为 开发 者 提供 快速 调用 这 些 代码 的 交互 方式 


CSS 设计 器 


2.“ 代 码 ” 工 作 环境 

该 工作 环境 主要 面向 进 阶 的 网 站 项 目 开发 者 ， 其 省 略 了 各 种 可 视 化 操作 的 面板 ， 仅 
保留 了 【文件 】 和 【代码 片段 】 等 两 个 面板 ， 以 期 将 最 大 的 【工作 区 】 面 积 留 给 代码 显 
示 以 及 内 容 预览 ， 提 高 开发 者 工作 效率 。 该 工作 环境 的 界面 如 图 6-6 所 示 。 
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6.2 ”创建 网 页 文档 


Dreamweaver CC 提供 了 便捷 的 方式 来 创建 各 种 类 型 的 网 页 文档 , 并 可 以 预 置 模板 的 
方式 生成 网 页 文档 的 初始 化 内 容 ， 帮 助 开 发 者 快速 对 其 进行 编辑 、 开 发 以 及 发 布 。 


网 页 文档 是 存储 网 页 各 种 数据 、 样 式 代 码 以 及 脚本 代码 的 载体 。 作 为 一 款 强大 的 网 
页 开发 工具 ，Dreamweaver 支持 很 多 类 型 的 网 页 文档 ， 在 Dreamweaver CC 中 ， 开 发 者 
可 以 创建 和 编辑 几乎 所 有 应 用 于 网 页 的 文档 类 型 。 但 在 日 常 开发 中 ， 开 发 者 需要 编辑 的 
网 页 文档 主要 有 以 下 几 种 ， 如 表 6-3 所 示 。 

表 6-3_ Dreamweaver 支持 的 常用 网 页 文档 类 型 


作 用 
以 HTML 4.01、XHTML 1.0 以 及 HTML 5 编写 的 网 页 结构 文档 


应 用 于 正 浏览 器 的 公用 控件 库 文件 
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芭 
EE 2 
功 


基于 HTML 的 Windows 可 执行 程序 文件 
XHTML 文档 “| .xhtml 以 XHTML 1.0 编写 的 网 页 结构 文档 
二 全 坟 思 | xml | 以 XML 结构 语言 编写 的 文本 文档 
.dtd 用 于 定义 XML 结构 文档 的 语义 、 规 则 的 文本 文档 
| css | 以 CSS2.1、CSS3.0 标准 语法 编写 的 样式 表 文 档 
人 Jless 以 LESS 框架 编写 的 样式 表 文档 


以 SASS 框架 编写 的 样式 表 文档 


ASP 文档 [am | 以 VBScript 脚本 和 ADO 技术 开发 的 ASP 文件 


名 
名 
名 
[4 


.asa 应 用 于 ASP 网 站 项 目的 全 局 脚本 文件 
ASPNET 网 页 文档 
ASPNET 文 档 | .cs 应 用 于 ASPNET 网 站 项 目的 C 杖 原 代 码 
vb 应 用 于 ASPNET 网 站 项 目的 Visual Basic 源 代码 
php | 由 PHP 语言 编写 的 PHP 脚本 文件 
由 PHP 3.0 语言 编写 的 PHP 脚本 文件 
PHP 文档 php4 ”| 由 PHP 4.0 语言 编写 的 PHP 脚本 文件 
由 PHP 5.0 语言 编写 的 PHP 脚本 文件 
phtml “| 由 PHP 脚本 控制 的 HTML 结构 文档 
SQL 脚本 SQL 数据 库 语句 编写 的 数据 库 命令 
SVG 图 形 ‘svg 以 基于 XML 的 SVG 语言 编写 的 网 页 矢量 图 形 文档 


JavaScript 脚本 | js 由 JavaScript 脚本 语言 编写 的 脚本 文档 


使 用 Dreamweaver CC， 开 发 者 可 以 方便 地 创建 、 编 辑 以 上 类 型 的 文档 ， 正 是 这 些 文 
档 共同 构成 了 网 站 项 目 。 


在 Dreamweaver CC 中 ， 开 发 者 可 以 通过 两 种 方式 来 创建 网 页 文档 ， 即 通过 【开始 
屏幕 】 的 快捷 方式 或 【新 建 】 命 令 等 。 


1. 开始 屏幕 快捷 方式 


开发 者 可 以 直接 在 Dreamweaver CC 的 开始 屏幕 单 击 【 新 建 】 选 项 下 的 几 种 网 页 文 
档 快 捷 方 式 ， 其 可 以 直接 创建 对 应 类 型 的 文档 ,诸如 HIML 文档 、CSS 文档 、JavaScript 
文档 等 ， 如 图 6-7 所 示 。 


Dreamweaver C( 
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最 近 浏览 的 文件 


PE 
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mm En 
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PHP XML less SAss 


[日 司 


外 点 放量 


和 _ 图 6-7 ,创建 HTML 文档 


【开始 屏幕 】 的 快捷 方式 可 以 为 这 些 类 型 的 网 页 文档 创建 最 基本 的 格式 以 及 预 置 内 
容 ， 例 如 ， 创 建 HTML 文档 时 ， 可 创建 基于 HTML 5.0 的 基本 HTML 文档 ， 如 图 6-8 
所 示 。 
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发 了 图 6-8 基本 的 HIML 5.0 文档 


197 


网 
页 
设 
计 
与 
网 
站 
建 
设 
OO 
© 
中 
2 
版 
住 


2.【 新 建 】 命 令 


如 果 开 发 者 需要 创建 更 多 规范 或 更 复杂 的 网 页 文档 ， 则 需要 使 用 Dreamweaver 提供 
的 【新 建 】 命 令 ， 通 过 向 导 来 创建 网 页 文档 。 


在 Dreamweaver CC 中 执行 【文件 】| 【新 建 】 命令， 即 可 打开 【新 建文 档 】 对 话 框 ， 
如 图 6-9 所 示 。 
页 类型 布局 
DD san 上 | Pe 
ss 3 下 证 , 标 是 往 
呈 间 Hqke 局 EF 本 
局 3 模板 
oc 
网 站 模板 噶 
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加 
本 wm 文档 
文 闪闪 型 [Ga 
布局 cs 信 轩 :添加 到 文档 关 
附加 css 文件 加 
| 
.| [Ww | © 


和 图 6-9_。【 新 建文 档 】 对 话 框 


在 该 对 话 框 中 ， 开 发 者 可 以 创建 4 种 类 型 的 网 页 文档 ， 即 【空白 页 】、【 流 体 网 格 
布局 】、【 启 动 器 模板 】 和 【网 站 模板 】。 

(1) 空白 页 

【空白 页 } 用 于 创建 各 种 类 型 的 基本 网 页 文档 , 并 允许 开发 者 定义 文档 的 类 型 。 例 如 ， 
在 创建 HTML 文档 时 ， 开 发 者 可 以 选择 “HTML 4.01 Transitional” 等 多 种 文档 类 型 ， 如 
表 6-4 所 示 。 


S55 表 6-4_ Dreamweaver 支持 的 HTML 文档 类 型 


基于 HTML 4.01 过 渡 模式 的 HIML 文档 
基于 HIML 4.01 严格 模式 的 HTML 文档 
基于 HIML 5.0 的 HTML 文档 
基于 XHTML 1.0 过 渡 模 式 的 HTML 文档 
基于 XHTML 1.0 严格 模式 的 HTML 文档 
基于 XHTML 1.1 的 HTML 文档 (已 废弃 》 
基于 XHTML Mobile 版 本 1.0 的 HTML 文档 (已 废弃 ) 


HIML 4.01 Transitional 
HTML 4.01 Strict 
HIML5S 


XHTML 1.0 Strict 
XHTMI 1.1 
XHTML Mobile 1.0 


以 上 这 些 类 型 的 HTML 文档 都 可 被 保存 成 扩展 名 为 “html”、“.htm” 的 网 页 文档 ， 
但 在 文档 的 头 部 信息 方面 有 所 区 别 。 在 创建 HIML 文档 时 ,开发 者 还 可 以 为 其 附加 CSS 
文件 ， 直 接 构 成 关联 关系 。 

(2) 流体 网 格 布局 

【流体 网 格 布局 】 的 作用 是 帮助 开发 者 设计 各 种 响应 式 布局 的 网 页 ， 以 帮助 开发 者 将 


网 页 文档 适 配 到 各 种 终端 设备 中 ， 如 图 6-10 所 示 。 


四 se 页 
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I A 内 加 css 文件 
| WE || mA) | 
《了 图 6-10 .流体 网 格 布局 


在 该 布局 下 ， 默 认 显示 了 三 种 类 型 的 设备 ， 即 “移动 设备 ” (手机 ) 、“ 平 板 电脑 ” 
(如 iPad 等 ) 以 及 “台式 机 ” (普通 PC) ， 开 发 者 可 以 分 别针 对 这 些 设备 定义 纵向 网 格 
的 数量 , 以 及 整个 网 页 占 这 些 设备 分 辨 率 的 百分比 ,然后 再 设置 文档 类 型 以 及 附加 的 CSS 
文件 ， 快 速 创建 带 有 CSS 样式 表 的 响应 式 网 页 。 

(3) 启动 器 模板 

【启动 器 模板 】 的 作用 是 根据 Dreamweaver CC 内 置 的 示例 来 创建 网 页 文档 ， 目 前 其 
支持 5 种 类 型 的 示例 页 ， 如 图 6-11 所 示 。 


Es Er 
opi Set 
博文 间 


使 月 拭 作 亚 记 8 于] 况 代 “关于 "页面 


和 |_ 图 6-11 启动 器 模板 
(4) 网 站 模板 


【网 站 模板 】 可 以 根据 站 点 以 及 开发 者 自行 建立 的 Dreamweaver 模板 文件 来 创建 网 
页 文档 ， 快 速生 成 模板 套 页 。 


6.3 ”操作 文档 视图 


Dreamweaver CC 为 开发 者 提供 了 多 种 查看 网 页 文档 的 方式 , 允许 开发 者 查看 网 页 文 


第 
下 
制 
作 
网 


页 


文 
档 


档 的 基本 代码 、 设 计 效 果 ， 以 及 可 展示 各 种 完整 页 面 浏览 效果 的 实时 视图 效果 等 。 

在 Dreamweaver 中 ,设计 者 可 以 通过 位 于 【文档 窗口 】 上 方 的 【文档 】 工 具 栏 来 快 
速 切换 文档 视图 ， 包 括 切换 为 “代码 ”视图 、“ 拆 分 ”视图 、“ 设 计 ” 视 图 以 及 “实时 
视图 ”等 。 


在 “代码 ”的 工作 环境 下 ，Dreamweaver 默认 对 网 页 文档 以 “代码 ”视图 的 方式 显 
示 。 如 当前 显示 的 为 其 他 视图 , 则 开发 者 可 以 在 【文档 ] 工 具 栏 中 单 击 [代码 ] 按 钮 三 做 码 三 ， 
切换 至 该 视图 。 

在 该 视图 下 ， 会 以 高 亮 的 方式 显示 网 页 文档 中 的 代码 ， 以 及 操作 这 些 代码 的 工具 ， 
如 图 6-12 所 示 。 


FEET | 


沙 阴 其 习 是 半 光 河 司 


‘<script> 
S$(function() { 
${'#List_product') .carouFredsel({ 
prev: '#prev_cl", 
mext: !#next_cl, 
auto: false 


Q 
〇 
中 
文 
版 
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S$(window) .resize(); 
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c/script> 
<script> 
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<div class="container_12"> 
civ id=nrnnny 


ti Ion 
人 [了 图 6-12 。“ 代 码 " 视图 下 的 文档 

在 “代码 ”视图 下 ， 网 页 文档 的 编辑 区 域 分 为 三 个 部 分 ， 即 最 左 侧 的 【编码 】 工 具 
栏 、【 行 号 】 列 ， 以 及 右 侧 的 【代码 】 区 域 等 。 

其 中 ， 【编码 】 工 具 栏 的 作用 是 在 开发 者 编写 代码 时 提供 各 种 查看 、 辅 助 以 及 格式 
化 功能 ， 其 包含 以 下 一 些 按钮 ， 如 表 6-5 所 示 。 
52 表 6-5 。 编码 工具 栏 的 按钮 及 其 作用 
按钮 名 称 


折 王 整个 标签 人 的 内 容 (如 位 于 <table> 和 </table> 之 间 


续 表 


按钮 名 称 
折 释 所 选 折 秋 所 选 代码 


还 原 所 有 折 壳 的 代码 


选择 父 标签 显示 插入 点 的 内 容 及 其 两 侧 的 开始 和 结束 标签 
平衡 大 括 弧 


在 插入 点 所 在 行 的 内 容 及 其 两 侧 放置 圆 括号 、 大 括号 或 方 括号 


园 | 国 


< 


En 


行 号 使 可 以 在 每 个 代码 行 的 行 首 隐藏 或 显示 数字 
用 黄色 高 亮 显示 无 效 的 代码 
自动 换行 单 击 该 按钮 一 行 中 较 长 的 代码 ， 将 自动 换行 

息 栏 中 的 语法 错 | 启用 或 禁用 页 面 项 部 提示 语法 错误 的 信息 栏 。 当 检测 到 语法 错误 时 ， 


信 
语法 错误 信息 栏 会 指定 代码 中 发 生 错 误 的 那 一 行 


应 用 注释 在 所 选 代 码 两 侧 添加 注释 标签 或 打开 新 的 注释 标签 

如 果 所 选 内 容 包 含 恢 套 注释 ， 则 只 会 删除 外 部 注释 标签 
环绕 标签 在 所 选 代 码 两 侧 添加 选 自 【快速 标签 编辑 器 】 的 标签 

从 【代码 片断 】 面 板 中 插入 最 近 使 用 过 的 代码 片断 
移动 或 转换 CSS 将 CSS 移动 到 另 一 位 置 ， 或 将 内 联 CSS 转换 为 CSS 规则 

将 选 定 内 容 向 右 移动 


凸 出 代码 将 选 定 内 容 向 左 移动 


格式 化 源 代码 个 页 面 


将 先前 指定 的 代码 格式 应 用 于 所 选 代 码 。 如 果 未 选择 代码 ， 应 用 于 整 


【 行 号 】 列 的 作用 是 显示 各 行 代码 的 行 号 ， 开 发 者 可 以 通过 【 行 号】 按钮 图 来 决定 关 
闭 或 开启 该 列 。 


【代码 】 


区 域 会 完整 地 显示 网 页 文档 的 源 代 码 ， 其 支持 诸多 编程 语言 的 语法 高 亮 支持 ， 


包括 HIML、XHTML、JavaScript、jQuery、CSS、PHP、ActionScript、C# 以 及 VBScript 


“设计 ”视图 是 “设计 ”工作 环境 下 的 默认 文档 视图 ， 其 作用 是 显示 当前 网 页 文档 的 
预览 效果 ， 并 为 开发 者 提供 可 视 化 的 编辑 网 页 元 素 的 方法 。 

如 果 当 前 显示 的 视图 并 非 “ 设 计 ” 视 图 ， 则 开发 者 可 以 直接 单 击 【文档 】 工 具 栏 中 
的 【设计 】 按钮 [及 寺 国 ， 或 单 击 【实时 视图 】 按 钮 其 时 视图 中 臣 右 侧 的 下 拉 箭 头 ， 执 行 【 设 
计 】 命 令 ， 调 出 “设计 ”视图 ， 如 图 6-13 所 示 。 

“设计 ”视图 主要 面向 网 页 初学 者 ， 开 发 者 可 以 完整 地 使 用 Dreamweaver 提供 的 各 
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闷 栖 革 司 灯 手 源 ) 
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种 可 视 化 工具 对 网 页 文档 进行 编辑 。 


“实时 视图 ”是 “设计 ”视图 的 增强 版 本 。 在 普通 的 “设计 ”视图 下 ， 仅 仅 能 显示 网 
页 文档 的 基本 HTML 结构 、 内 容 以 及 简化 的 CSS 样式 表 ， 并 不 能 执行 各 种 交互 行为 脚 
本 ， 也 不 能 从 网 页 的 动态 服务 器 中 获取 数据 和 信息 。“ 实 时 视图 ” 则 对 “设计 ”视图 进 
行 了 大 幅 改进 ， 其 支持 在 Dreamweaver 中 显示 真正 浏览 器 意义 的 网 页 文档 ， 帮 助 开 发 者 
测试 网 页 的 交互 性 ， 调 试 程序 Bug。 

在 Dreamweaver 的 “设计 ”工作 环境 或 “代码 ”工作 环境 均 提供 了 “实时 视图 ”的 
快捷 调用 方式 ， 开 发 者 可 以 在 【文档 】 工 具 栏 中 单 击 【 实 时 视图 】 按 钮 雄 时 视图 中 可 或 单 
击 【 设 计 】 按 钮 Ct 二 右 侧 的 下 拉 箭 头 ， 执 行 【实时 视图 】 命 令 ， 调 出 “实时 视图 ” 界 
面 ， 如 图 6-14 所 示 。 


和 图 6-14 “实时 视图 ”下 的 界面 


在 “实时 视图 ”下 ， 开 发 者 可 以 真实 的 浏览 器 显示 环境 来 测试 网 页 文档 的 各 种 交互 
性 ， 查 看 网 页 文档 最 终 的 输出 效果 。 


“ 拆 分 ”视图 是 Dreamweaver 为 网 页 开发 者 提供 的 一 种 便捷 开发 界面 ， 在 该 界面 中 ， 
开发 者 可 以 一 边 编辑 网 页 文档 的 代码 , 一 边 即时 查看 代码 生成 的 浏览 效果 。Dreamweaver 
提供 了 多 种 类 型 的 “ 拆 分 ”视图 ， 包 括 “ 拆 分 代码 ”视图 、“ 拆 分 代码 与 设计 ”视图 和 
“ 拆 分 实时 视图 与 代码 ”视图 等 。 


1， 拆 分 代码 


“ 拆 分 代码 ”视图 的 作用 是 同时 显示 两 个 当前 网 页 文档 的 代码 内 容 , 或 同时 显示 当前 
网 页 文档 和 该 文档 引用 的 外 部 代码 , 以 帮助 开发 者 在 开发 源 代码 时 进行 即时 对 照 和 参考 。 
在 Dreamweaver 中 ， 开 发 者 可 以 执行 【查看 】|【 拆 分 代码 】 命 令 ， 切 换 至 “ 拆 分 代码 ” 
视图 ， 如 图 6-15 所 示 。 


<div class="clear"></div> 
<div class="container_12"> 


<div class="grid_12"> 
<div class="slidprev"><span>Prev</span></div> 


<div class="clear"></div> 


<div class="container_12"> 
<div class="grid_12"> 


<div class="slidprev"><span>prev</span><fHiv> 
<div class="slidnext"><span>Next</span></div> 
<div id="slider"> 


和 图 6-15 “ 拆 分 代码 ”视图 


在 “ 拆 分 代码 ”视图 下 ， 开 发 者 可 以 在 【文档 】 选 项 卡 下 的 【外 部 文件 】 工 具 栏 中 
选择 该 网 页 文档 加 载 的 外 部 文件 , 同时 编辑 当前 网 页 文档 以 及 其 引用 的 外 部 文件 , 例如 ， 
在 编辑 当前 网 页 文档 的 同时 编辑 其 引用 的 “style.css” 样 式 表 文 件 ， 即 可 在 【外 部 文件 】 
工具 栏 中 单 击 “style.css” 按 包 蕊 弄 硬 转型 ， 在 当前 网 页 文档 下 方 显示 该 外 部 文件 ， 如 图 
6-16 所 示 。 


2. 代码 和 设计 
“代码 和 设计 ”视图 的 作用 是 同时 显示 网 页 文档 的 源 代码 和 基本 预览 效果 , 辅助 开发 


者 在 编写 网 页 文档 的 结构 代码 和 样式 代码 时 即时 预览 ， 同 时 结合 Dreamweaver 的 可 视 化 
操作 来 编辑 网 页 文档 。 


在 Dreamweaver 中 执行 【查看 】| 人 代码 和 设计 】 命 令 ， 即 可 以 “代码 和 设计 ”视图 
的 方式 进行 网 页 编辑 ， 如 图 6-17 所 示 。 
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和 图 6-16 ,同时 显示 文档 和 外 部 文件 
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《了 图 6-17 “代码 和 设计 ”视图 

在 默认 的 状态 下 ，“ 代 码 和 设计 ”视图 中 的 “设计 ”视图 会 显示 在 【文档 窗口 】 的 
上 访 ， 开 发 者 可 以 执行 【查看 】I 【顶部 的 设计 视图 】 命 令 , 取消 该 命令 之 前 的 对 号 “VY” 
激活 状态 ， 从 而 将 “设计 ”视图 放置 在 【文档 窗口 】 底 部 ， 并 将 “代码 ”视图 放置 在 【 文 
档 窗 口 项 部 】。 

3. 代码 和 实时 视图 


“代码 和 实时 视图 ”是 “代码 和 设计 ”的 进 阶 视图 ， 其 与 “代码 和 设计 ”视图 的 区 别 
在 于 其 将 “代码 和 设计 ”视图 中 的 “设计 ”视图 更 换 为 更 加 能 够 体现 网 页 文档 最 终 效果 
的 “实时 视图 ”， 以 在 开发 者 进行 编码 时 提供 更 加 准确 的 内 容 效 果 。 


在 Dreamweaver CC 中 ， 开 发 者 可 以 首先 切换 至 “代码 和 设计 ”视图 ， 然 后 再 执行 【 查 
看 】| 【切换 实时 视图 】 命 令 ， 将 界面 切换 为 “代码 和 实时 视图 ”模式 ， 如 图 6-18 所 示 。 


一 


Breeze Theme 


Breeze is the 14 stylish HTML templates, 


和 图 6-18 “代码 和 实时 视图 ”模式 


4. 垂直 拆 分 


在 默认 状态 下 ，Dreamweaver 允许 开发 者 以 水 平方 式 来 拆 分 【文档 窗口 】， 即 以 上 
下 两 个 子 窗口 的 方式 显示 拆 分 内 容 。 实 际 上 Dreamweaver CC 还 提供 了 “垂直 拆 分 ” 模 
式 ， 即 以 左右 两 个 子 窗口 的 方式 显示 拆 分 内 容 。 

在 进入 “ 拆 分 ”视图 之 后 ， 开 发 者 可 以 执行 【查看 】|【 重 直 拆 分 】 命 令 ， 将 被 拆 分 
的 两 个 子 窗口 以 左右 方式 排列 ， 如 图 6-19 所 示 。 
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和 图 6-19 “垂直 拆 分 ”模式 
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在 执行 “垂直 拆 分 ”模式 之 后 ， 开 发 者 可 以 通过 执行 【查看 】| sh 
命令 或 执行 【查看 】|【 左 侧 的 设计 视图 】 命令, 取消 这 两 条 命令 的 对 号 “v ”激活 状态 ， 
交换 左右 两 个 子 窗口 的 位 置 。 


处 理 网 页 文本 


文本 是 网 页 文档 中 最 基本 的 显示 内 容 ， 其 通常 由 各 种 编码 的 普通 字符 、 特 殊 符 号 组 
成 。Dreamweaver 为 开发 者 提供 了 多 种 便捷 方式 以 快速 为 网 页 文档 插入 各 种 类 型 的 文本 。 


网 页 文档 中 的 文本 通常 以 段落 、 标 题 以 及 pg 
预 格式 文本 等 语义 单元 来 存储 。 在 默认 状态 下 ， | 二 下 天 和 
Dreamweaver 会 在 “设计 ”视图 中 将 文本 输入 站 3 时 
操作 作为 默认 操作 ， 开 发 者 可 以 在 【属性 】 检 


查 器 中 选择 要 插入 的 文本 类 型 ， 然 后 再 将 光标 oe CE 加 
置 于 “设计 ”视图 的 文档 窗口 内 ， 直 接 输入 文 
本 以 创建 一 个 语义 单元 。 


例如 ， 输 入 普通 的 段落 文本 ， 开 发 者 需要 
先 在 【属性 ] 检 查 器 中 设置 【格式 ] 为 “段落 ”， 人 了 图 6-20。 输 入 普通 段落 内 容 
然后 再 输入 文本 内 容 ， 如 图 6-20 所 示 。 

在 输入 文本 后 ， 开 发 者 每 按 一 次 “ 回 车 键 ”，Dreamweaver 就 会 创建 一 个 新 的 语义 
单元 。 例 如 ， 当 前 所 设置 的 【格式 】 为 段落 ， 则 每 按 一 下 回 车 ，Dreamweaver 就 会 创建 
一 个 新 的 段落 。 

除了 以 段落 的 方式 输入 文本 以 外 ，Dreamweaver 也 允许 开发 者 以 其 他 语义 元 素 的 方 
式 来 输入 文本 ,诸如 以 “标题 1” 到 “标题 6” 等 6 种 标题 ， 以 及 预 格式 文本 等 。 开 发 者 
可 以 在 属性 选择 器 中 分 别 选择 这 些 【格式 】 类 型 ， 然 后 再 输入 文本 。 


【属性 】 检 查 器 是 Dreamweaver 提供 的 一 个 用 于 “设计 ”视图 的 元 素 属性 检查 与 设 
置 工具 。 当 开发 者 在 “设计 ”视图 内 选择 了 某 些 网 页 元 素 (如 文本 、 图像 、 超 链接 、HTML 
标记 、 动 画 、 视 频 、 表 单 等 ) 时 ，【 属性】 检查 器 就 会 提供 这 些 项 目 内容 的 属性 设置 ， 
帮助 开发 者 定义 这 些 网 页 元 素 的 属性 。 典 型 的 文本 内 容 【 属性】 检查 器 如 图 6-21 所 示 。 
层 性 


“Br | 


ET 


和 图 6-21 ,文本 内 容 的 【属性 】 检 查 器 


在 默认 状态 下 ， 文 本 内 容 的 【属性 】 检 查 器 提供 了 基本 的 HTML 文本 设置 ， 如 表 
6-6 所 示 。 


3 表 6-6 。 文本 内 容 的 HTML 属性 


以 无 格式 的 方式 输入 文本 或 将 当前 选择 文本 转换 为 无 格式 文本 
以 段落 的 方式 输入 文本 或 将 当前 选择 文本 转换 为 段落 文本 


格式 


以 一 级 标题 的 方式 输入 文本 或 将 当前 选择 文本 转换 为 一 级 标题 
以 二 级 标题 的 方式 输入 文本 或 将 当前 选择 文本 转换 为 二 级 标题 
以 三 级 标题 的 方式 输入 文本 或 将 当前 选择 文本 转换 为 三 级 标题 
以 四 级 标题 的 方式 输入 文本 或 将 当前 选择 文本 转换 为 四 级 标题 


标题 6 


以 五 级 标题 的 方式 输入 文本 或 将 当前 选择 文本 转换 为 五 级 标题 
以 六 级 标题 的 方式 输入 文本 或 将 当前 选择 文本 转换 为 六 级 标题 


CSS 类 


预先 格式 化 的 


以 预 格式 文本 的 方式 输入 文本 或 将 当前 选择 文本 转换 为 预 格式 文本 
定义 当前 语义 单元 的 CSS 类 《〈 即 HIML 标记 的 class 属性 


页 面 属性 


为 当前 所 选 文 本 加 粗 或 以 粗 体 的 方式 创建 文本 ( 即 HTML 的 B 标 记 ) 

为 当前 所 选 文本 设置 倾斜 效果 〈 即 HTML 的 工 标记 ) 

创建 一 个 无 序列 表 (HTML 中 的 UL 标记 ) 并 将 当前 所 选 文本 转换 为 该 无 
序列 表 中 的 项 目 (HTML 中 的 II 标记 ) 

创建 一 个 有 序列 表 (HTML 中 的 OL 标记 ) 并 将 当前 所 选 文本 转换 为 该 有 
序列 表 中 的 项 目 (HTML 中 的 II 标记 ) 

清除 文本 的 块 引用 状态 ( 即 HTML 中 的 BLOCKQUOTE 标记 ， 如 文本 被 多 
个 块 引 用 所 环绕 ， 则 仅 清除 最 近 的 一 个 块 引 用 ) 

为 文本 添加 一 个 块 引用 状态 〈 即 HTML 中 的 BLOCKQUOTE 标记 ) 
在 将 当前 文本 转换 为 超 链接 之 后 为 其 添加 标题 (HTML 中 A 标记 的 title 属 
性 ， 即 鼠标 滑 过 该 超 链接 时 显示 的 工具 提示 内 容 ) 

定义 当前 语义 单元 的 人 值 ( 即 HTML 标记 的 这 属性 

在 此 输入 一 个 URL 地 址 ， 可 将 当前 所 选 的 文本 转换 为 文本 超 链接 

按 住 该 图 标 后 将 鼠标 拖 忠 至 当前 站 点 内 的 某 个 文件 或 目录 ， 可 直接 创建 针 
对 该 文件 或 目录 的 超 链接 

单 击 此 按钮 ， 可 在 弹出 的 窗口 中 选择 文本 指向 的 超 链接 文档 

当选 择 的 文本 为 超 链接 时 ， 定 义 将 链接 的 文档 以 新 窗口 的 方式 打开 
当选 择 的 文本 为 超 链接 时 ， 定 义 将 链接 文档 加 载 到 包含 该 链接 的 父 框架 集 
或 窗口 中 。 如 果 包 含 链接 的 框架 不 是 幅 套 的 ， 则 链接 文档 加 载 到 整个 浏览 
器 窗口 中 。 

当选 择 的 文本 为 超 链 接 时 ， 定 义 在 当前 的 窗口 中 打开 链接 的 文档 

当选 择 的 文本 为 超 链接 时 ， 定 义 将 链接 的 文档 加 载 到 整个 浏览 器 窗口 中 ， 
并 删除 所 有 框架 

当选 择 的 文本 为 超 链接 时 ， 定 义 将 链接 的 文档 加 载 到 浏览 器 窗口 内 指定 ID 
的 框架 内 
单 击 该 按钮 ， 可 打开 【页 面 属性 】 对 话 框 ， 定 义 整个 文档 的 属性 


列表 项 目 


当选 择 的 文本 为 项 目 列表 或 编号 列表 时 ， 可 通过 该 按钮 在 弹出 的 对 话 框 中 
定义 列表 的 样式 


由 于 Dreamweaver 在 “设计 ”视图 中 将 文本 输入 操作 作为 默认 操作 ， 因 此 当 开 发 者 并 
未 选择 任何 网 页 元 素 时 , 【属性 】 检 查 器 会 显示 文本 内 容 的 属性 。 而 当 开 发 者 选择 文本 内 容 


〈 诸 如 段落 、 标 题 、 


预 格式 文本 ) 时 ，【 属 性 】 检 查 器 也 会 切换 至 文本 内 容 的 属性 。 


Dreamweaver 人 允许 开发 者 为 网 页 插入 一 些 符合 Unicode 编码 的 特殊 字符 ， 以 表现 一 
些 特定 的 含义 ， 在 Dreamweaver 中 ， 开 发 者 可 以 执行 【插入 】| 【字符 】 命 令 ， 在 弹出 的 
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菜单 中 选择 特殊 符号 ， 如 图 6-22 所 示 。 
除 此 之 外 ， 开 发 者 也 可 以 通过 【插入 】 面 板 的 【常用 】 选 项 卡 下 的 【字符 】 按 钮 之 
前 的 下 拉 箭 头 ， 插 入 这 些 特殊 符号 ， 如 图 6-23 所 示 。 
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发 了 图 6-22 ,插入 特殊 符号 和 图 6-23 .从 【插入 】 面 板 插入 特殊 符号 


Dreamweaver 在 这 两 个 位 置 提供 了 12 种 基本 的 特殊 符号 ， 其 作用 如 表 6-7 所 示 。 
3 表 6-7_，Dreamweaver 的 基本 特殊 符号 


图 标 名 称 显示 作用 ) 
加 两 段 间距 较 小 
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除 以 上 12 种 基本 的 特殊 符号 外 , 开发 者 还 可 以 在 这 两 处 位 置 选择 【其 他 字符 】 选 项 ， 
在 弹出 的 【插入 其 他 字符 】 对 话 框 中 选择 更 多 的 特殊 字符 ， 将 其 插入 到 网 页 文档 中 ， 如 
图 6-24 所 示 。 


处 理 网 页 图 像 


图 像 是 网 页 文档 中 重要 的 界面 元 素 , 相 比 文本 内 容 , 网 页 图 像 的 表现 能 力 更 加 丰富 ， 
也 能 体现 出 更 加 形象 的 内 容 。 


绝 大 多 数 Web 浏览 器 都 支持 显示 图 像 , 但 是 并 非 所 有 图 像 都 被 Web 浏览 器 所 支持 。 
通常 情况 下 ， 开 发 者 可 以 使 用 的 网 页 图 像 主要 包括 以 下 几 种 。 


1:.alPEG 


JPEG (Joint Photographic Experts Group， 联 合 图 像 专 
家 组 推荐 格式 ) 图 像 支持 显示 更 加 丰富 颜色 的 图 像 ， 并 多 
许 开 发 者 根据 压缩 比 来 优化 图 像 的 尺寸 , 其 缺点 是 不 支持 
因此 在 实际 的 网 页 设计 中 ， 这 类 图 
像 更 多 地 被 用 于 显示 照片 等 需要 高 清晰 度 内 容 的 图 像 。 


Alpha 通道 〈 透 明 ) ， 


2, GIF 


GIF (Graphics Interchange Format， 图 像 交 换 格式 ) 图 像 的 特点 是 提供 基本 的 Alpha 
通道 支持 ， 同 时 也 提供 更 好 的 压缩 比 以 及 逐 帧 动画 支持 。 
在 网 页 设计 中 ， 此 类 图 像 主 要 用 于 显示 简单 的 逐 帧 动画 以 及 对 色彩 还 原 度 要 求 较 低 的 按 


钮 背景 等 。 
3. PNG 


PNG (Portable Network Graphics， 可 移植 网 络 图 像 ) 图 像 是 一 种 功能 性 更 强 的 图 像 ， 


其 兼顾 了 JPEG 和 GIF 等 两 类 图 像 的 优点 , 既 支 持 
更 加 丰富 的 色彩 还 原 效果 , 同时 也 支持 Alpha 通道 
(透明 ) ， 可 以 在 保障 图 像 表 现 力 的 同时 提供 较 好 
的 压缩 比 ， 唯 一 缺陷 是 不 支持 动画 内 容 。 早 期 的 
正 浏览 器 (8.0 版 本 之 前 ) 对 此 类 图 像 支持 稍 差 ， 
但 是 如 今 几乎 所 有 的 Web 浏览 器 都 预 置 了 对 此 类 
图 像 优异 的 支持 , 成 为 目前 互联 网 中 应 用 最 广泛 的 
图 像 格式 。 


在 Dreamweaver CC 中 执行 【插入 】|【 图 像 】 
1【 图 像 】 命令 ,然后 即 可 打开 【选择 图 像 源 文件 】 
对 话 框 ,选择 要 插入 的 图 像 文件 ， 如 图 6-25 所 示 。 


档 之 间 
档 ” 时 ，Dreamweaver 


的 绝对 位 置 URL 作为 插入 图 像 的 链接 路 径 。 


图 像 与 网 页 文档 的 相对 链接 。 


在 单 击 【确定 】 按 钮 之 后 ，Dreamweaver 就 会 直 


和 图 6-24 ,插入 其 他 字符 


其 缺点 是 仅 支 持 256 色 ， 因 此 
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和 图 6-25 .选择 图 像 源 文件 


在 该 对 话 框 中 ， 用 户 除 了 可 以 选择 图 像 文件 的 位 置 以 外 ， 还 可 以 定义 图 像 与 网 页 文 
的 关联 关系 ， 当 设置 【相对 于 】 选 项 值 为 “ 文 
会 直接 将 该 图 像 在 本 地 计算 机 
而 当 设 
置 【 相 对 于 】 选 项 值 为 “站 点 根 目 录 ” 时 ， 则 
Dreamweaver 会 根据 站 点 根 目 录 的 地 址 来 生成 一 个 


接 将 图 像 文件 显示 到 网 页 文档 的 “设计 ”视图 中 ， 如 ”了 图 6_26 插入 后 的 网 页 图 人 


图 6-26 所 示 。 
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开发 者 可 以 直接 拖 忠 插入 后 图 像 的 右 侧 、 下 方 以 及 右 下 角 的 三 个 正方 形 调节 柄 ， 拖 
忠 调节 图 像 的 尺寸 。 


在 Dreamweaver 中 , 图 像 的 属性 也 是 通过 【属性 】 检 查 器 来 设置 的 。 当 开发 者 在 “ 设 
计 ” 视 图 中 选择 某 幅 图 像 之 后 ，Dreamweaver 的 【属性 】 检 查 器 就 会 自动 切换 至 图 像 的 
【属性 】 检 查 器 内 容 ， 如 图 6-27 所 示 。 


入 图 6-27 图像 的 【属性 】 检 查 器 

在 网 页 图 像 的 【属性 】 检 查 器 中 ， 开 发 者 可 以 快速 定义 图 像 的 各 种 属性 ， 并 调用 外 
部 的 程序 来 对 图 像 进行 直接 编辑 ， 其 作用 如 表 6-8 所 示 。 
3 表 6-8 _。 网 页 图 像 的 属性 设置 


属 性 作 用 

ID 定义 当前 图 像 的 ID 属性 〈 即 HTML IMG 标记 的 id 属性 ) 
Src 定义 当前 图 像 的 URL 地 址 〈 即 HTML IMG 标记 的 sre 属性 ) 
链接 定义 当前 图 像 的 超 链接 URL 地 址 


Class ”| 定义 当前 图 像 的 CSS 类 ( 即 HTMLIMG 标记 的 class 属性 ) 
调用 相关 的 图 像 处 理 软件 来 编辑 图 像 ， 如 为 普通 图 像 ， 则 调用 Adobe Photoshop， 而 如 为 
PNG 图 像 ， 则 调用 Adobe Fireworks (前 提 是 当前 计算 机 已 经 安装 相关 软件 ) 
| 呈 | 定 义 图 像 的 发 布 属性 ， 如 为 PEG 图 像 时 定义 图 像 的 压缩 处 理 级 别 等 
编 | 轴 | 根据 图 像 的 源 文件 快速 自动 更 新 ( 仅 对 有 PSD 关联 的 图 像 有 效 ) 
和 | 过 | 对 图 像 进行 裁 状 操作 ， 删 除 被 裁剪 掉 的 区 域 
| 国 | 对 已 经 调整 大 小 的 图 像 重新 取样 
| (Q | 调整 图 像 的 赏 度 和 对 比 度 
消除 图 像 的 模糊 效果 
宽 定义 图 像 的 水 平 尺寸 
高 定义 图 像 的 冬 直 尺寸 
蔡 换 | 定义 图 像 的 蔡 换 文本 《〈 即 HTML IMG 标记 的 alt 属性 》 
定义 图 像 的 标题 (HTML IMG 标记 的 title 属性 ， 即 鼠标 滑 过 该 超 链接 时 显示 的 工具 提示 


人 内 容 ) 或 图 像 所 在 超 链 接 的 标题 环绕 该 图 像 的 超 链接 标记 A 的 title 属性 
地 图 定义 图 像 热 区 的 ID〈 即 图 像 所 关联 的 HTML MAP 标记 的 id 属性 ) 

|) 选择 图 像 上 的 热 区 ， 进 行 移动 、 删 除 等 操作 

口 在 图 像 上 绘制 一 个 矩形 的 热 区 

办 在 图 像 上 绘制 一 个 椭圆 形 热 区 

MY 在 图 像 上 绘制 一 个 多 边 形 热 区 


目标 定义 图 像 超 链 接 的 打开 方式 ， 其 与 文本 的 【属性 】 检 查 器 相关 设置 作用 相同 
原始 如 使 用 的 是 PSD 文档 输出 的 图 像 文 件 ， 此 处 将 显示 PSD 文档 的 URL 路 径 
Dreamweaver 具有 与 Adobe Photoshop、Adobe Fireworks 等 同系 列 图 像 处 理 软件 强大 
的 兼容 性 ， 开 发 者 可 以 使 用 Dreamweaver 与 这 些 软 件 进 行 协作 设计 和 制作 网 页 ， 并 处 理 
网 页 中 的 图 像 内 容 。 


6.6 处理 超 链接 


超 链 接 是 网 页 文档 与 相关 其 他 网 页 文档 、 资 源 的 连接 桥梁 ， 也 是 网 页 文档 与 其 他 类 
型 计算 机 文档 最 重要 的 区 别 之 一 。 使 用 超 链 接 ， 终 端 用 户 可 以 通过 鼠标 单 击 的 方式 快速 
从 当前 网 页 文档 跳 转 或 直接 打开 外 部 的 其 他 相关 网 页 文档 与 资源 。 

Dreamweaver 提供 了 可 视 化 的 方式 为 网 页 中 的 文本 、 图 像 等 网 页 元 素 添 加 超 链接 ， 
快速 与 外 部 其 他 文档 、 相 关 资 源 建立 连接 关系 ， 具 体 包 括 三 种 方式 ， 即 通过 【Hyperlink】 
命令 、【 插 入 】 面 板 ， 以 及 通过 【 属性】 检查 器 等 。 


1. Hyperlink 命令 


在 选中 文本 或 图 像 后 ， 开 发 者 可 以 直接 执行 【插入 】|【Hyperlink】 命 令 来 将 文本 或 
图 像 转 换 为 文本 链接 以 及 图 像 链接 ， 如 图 6-28 所 示 。 
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上 了 图 6-28 _ 插入 【Hyperlink】 


此 时 ，Dreamweaver 会 弹出 【Hyperlink】 对 话 框 ， 允 许 开发 者 设置 超 链 接 的 属性 ， 
如 图 6-29 所 示 。 


文本 : 
链接 :| | 
目标 : 


标题 : 
访问 键 : 
Tab 键 索引 - 


《 了 图 6-29 【Hyperlink】 对 话 框 
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在 该 对 话 框 中 ， 开 发 者 可 以 设置 超 链 接 的 几乎 所 有 属性 ， 如 表 6-9 所 示 。 
2 表 6-9 。 超 链接 的 相关 属性 


超 链接 内 含 的 文本 内 容 
超 链接 指向 的 URL 地 址 (HTML A 标记 的 href 属性 ) 

超 链接 所 连接 外 部 文档 的 打开 方式 (HTML A 标记 的 target 属性 ) 
超 链接 的 标题 (HTML A 标记 的 title 属性 ) 

访问 该 超 链接 的 快捷 键 (HTML A 标记 的 accesskey 属性 ) 

在 整个 网 页 文档 中 通过 Tab 键 跳 转 焦点 的 顺序 (HIML A 标记 的 tabindex 属性 ) 


Tab 键 索引 

2. 面板 插入 

除了 通过 【Hyperlink】 命 令 以 外 ， 开 发 者 也 可 以 通过 【插入 】 面 板 中 的 指定 按钮 来 
插入 超 链接 ， 其 效果 与 【Hyperlink】 命 令 基本 类 似 。 

以 插入 图 像 链接 为 例 ， 在 选中 图 像 之 后 ， 开 发 者 可 以 在 【插入 】 面 板 的 “常规 ” 选 
项 卡 中 直接 单 击 【Hyperlink】 按 钮 上 @Jwesya， 插 入 超 链 接 ， 如 图 6-30 所 示 。 
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上 了 图 6-30 插入 图 像 链接 


然后 ，Dreamweaver 同样 会 弹出 【Hyperlink】 对 话 框 来 允许 开发 者 定义 超 链 接 的 属 
性 ， 在 此 将 不 再 袭 述 。 


3.【 属 性 】 检 查 器 

在 选择 图 像 或 文本 内 容 之 后 ， 开 发 者 也 可 以 直接 在 【属性 】 检 查 器 中 直接 设置 图 像 
或 文本 内 容 的 【链接 】 属 性 ， 定 义 超 链接 的 【目标 】 属 性 和 【标题 】 属 性 ， 完 成 其 超 链 
接 的 设置 ， 具 体 方式 在 此 将 不 再 次 述 。 


6.7 课堂 练习 : 配置 本 地 服务 器 


在 使 用 Dreamweaver 进行 Web 开发 时 ，Web 项 目 中 的 服务 器 程序 以 及 前 端的 脚本 


交互 功能 往往 都 需要 服务 器 环境 才能 运行 , 因此 开发 者 需要 首先 为 Web 项 目 建立 测试 服 
务 器 环境 ， 以 对 Web 项 目 进行 测试 与 调试 。 

以 最 基本 的 ASP、ASP.Net 等 服务 器 端 程序 为 例 ， 开 发 者 以 通过 本 地 Windows 操作 
系统 的 Internet Information Services (简称 IIS) 工具 来 配置 一 个 本 地 服务 器 ， 建 立 虚 拟 站 
点 来 对 Web 项 目 进行 测试 。 

本 练习 将 以 Windows 8.1 x64 专业 版 作为 平台 ， 配 置 一 个 基于 IIS 工具 的 本 地 服务 
器 ， 通 过 该 工具 来 实现 ASP、ASP.Net 等 服务 器 端 程序 的 解析 ， 以 及 本 地 了 发 布 。 在 配 
置 完成 本 地 服务 器 之 后 ， 开 发 者 即 可 通过 本 地 模拟 远程 Web 访问 ， 如 图 6-31 所 示 。 


€ 3 ET ETS RE 


踢 windows 


Internet Information Services 


Welcome Bee Tervetuloa 
£32t Benvenuto + 
?+ Wh Bienvenido Hos ge 
用 
KaNwc 
Vitete oploars 站 雪 庄 可 中 * 1 bdvozoljok 
2 Bee 


| 


Microsoft W men DEN 


和 图 6-31 。 本 地 服务 器 站 点 
1. 安装 IIS 在 更 新 的 【 控制 面板 ] 窗 口中 , 选择 【 程序 】 


在 【任务 栏 ] 中 单 击 [ 文件 资源 管理 器 ] 按 5 
钮 于， 在 弹出 的 【 库 ] 窗口 拖 披 左 侧 【 导 


航 窗 格 ] 的 垂直 滚动 条 ,直至 滚动 到 导航 窗 OO + DG 
格 底部 , 单 击 选择 [ 控制 面板 ] 的 导航 项 目 ， 调整 计算 机 的 设置 二 - 
如 图 6-32 所 示 。 pie < 
二 | 优化 视觉 号 示 
和 _ 图 6-32 展开 库 功 能 区 和 图 6-33 选择 【程序 】 选 项 
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在 更 新 的 【程序 】 窗 口中， 单 击 选择 【 启用 
或 关闭 Windows 功能 】 选 项 ， 如 图 6-34 
所 示 。 


和 图 6-34 启用 或 关闭 Windows 功能 


在 弹出 的 【 Windows 功能 】 对 话 框 中 ， 开 
发 者 可 以 单 击 【 Internet Information 
Services 】 选项 之 前 的 复 选 框 ， 然 后 再 单 击 
其 左 侧 的 【 展开 】 按钮 由 ， 展 开 IIS 的 安装 
项 目 ， 如 图 6-35 所 示 。 

画 Windows 功能 


启用 或 关闭 Windows 功能 
人 车 要 关闭 一 种 功能 ,请 清 除 其 复 迁 
填充 的 框 表示 仅 启用 该 功能 的 一 部 分 . 
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田口 由 FTp 服务 器 
田 回 及 Web 管理 工具 
图 回民 万 维 网 服务 
口 及 Internet Information Services 可 承载 的 Web 核心 
田口 及 Microsoft Message Queue (MSMQ) 服务 器 


口上 上 RAS 连接 管理 器 管理 工具 包 (CMAK) 
口 朋 Rip 俩 听 器 

回 用 SMB 1.0/CIFS 文件 共享 支持 

口 及 Telnet 服务 器 

口 有 Telnet 宪 户 洋 

口 且 TFTP 客户 注 

MR windows Identity Foundation 3.5 


上 了 图 6-35 选择 IIS 安装 项 目 


单 击 【 万 维 网 服务 】 选项 左 侧 的 【 展开 】 按 
钮 [ 贡 , 再 单 击 【 应 用 程序 开发 功能 ] 之 前 的 
【 展开 ] 贞 按钮 , 根据 Web 项 目的 需求 来 选 


择 对 应 的 服务 器 端 程序 类 型 ， 如 图 6-36 
所 示 。 


和 图 6-36 ,选择 服务 器 端 程序 


加 如 果 开 发 者 需要 通过 FTP 协议 来 对 服务 器 
端 数据 进行 上 传 和 下 载 ， 可 选择 【 Internet 
Information Services 】 选项 下 的 【 FTP 服务 
器 】 子 选项 ， 如 图 6-37 所 示 。 


I Intemet Explorer 11 
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日 回 上 Frp 服务 器 
Bh FP Rs 
口 有 Frp 扩展 性 


田 回 朋 Web 管理 工具 

田 回 具 万 扒 网 服务 

口 朋 Internet Information services 可 承 本 的 Web 核心 
田口 有 Microsof Message Queue (MSMQ) 服务 器 


和 图 6-37_FTP 选项 设置 


如 果 在 开发 时 需要 使 用 HTTP 重 定向 功能 ， 
以 通过 脚本 来 为 客户 端 浏览 器 进行 内 容 跳 
转 ， 可 在 【 万 维 网 服务 】 选项 下 的 【 常见 


HTTP 功能 ] 子 选项 内 选择 【 HTTP 重 定向 】 
选项 ， 如 图 6-38 所 示 。 
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和 图 6-38 ,设置 HTTP 重 定向 


图 选择 [Internet Information Services 】 选 项 
下 方 的 【 Internet Information Services 可 承 
载 的 Web 核心 ] 选项 , 单 击 【 确定 】 按钮 ， 
完成 配置 ， 如 图 6-39 所 示 。 
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口 有 RAS 连接 管理 器 管理 工具 包 (CMAK 

口 及 Rip 俩 听 器 

回 且 SMB 1.0/CIFS 文件 共享 支持 

口 且 Telnet 服务 器 

口 县 Telnet 喜 户 六 

口 县 TFTp 客户 并 v 


和 图 6-39 ,完成 安装 配置 


2. 配置 Web 站 点 
按 下 Windows 键 +R 组 合 键 , 在 弹出 的 【 运 


行 ] 对 话 框 中 输入 “InetMgr.exe”, 单 击 [ 确 
定 】 按钮 ， 启 动 lIS 管理 器 ， 如 图 6-40 
所 示 。 


发 了 图 6-40 。 启 动 IIS 管理 器 


在 弹出 的 【Internet Information Services 
(IIS ) 管理 器 】 窗 口中 ， 展 示 了 当前 计算 机 
可 连接 的 所 有 本 地 和 远程 计算 机 的 IIS 服务 
器 ， 如 图 6-41 所 示 。 


和 图 6-41 .IIS 管理 器 窗口 


单 击 左 侧 【 连接 ] 窗 格 内 本 地 服务 器 左 侧 的 
【 展开 】 按钮 |: ， 选 择 【 网 站 】 项 目 ， 然 后 
即 可 在 右 侧 【 网 站 】 窗 格 中 右 击 【 Default 
Web Site 】 项目 ,执行 【 基本 设置 】 命令 ， 
如 图 6-42 所 示 。 


和 图 6-42 配置 基本 设置 
在 弹出 的 【 编辑 网 站 】 对 话 框 中 设置 【 物理 


路 径 ] 值 为 “DA\WebSites”， 然 后 即 可 单 击 
【 确定 】 按 钮 ， 将 该 目录 设置 为 本 地 服务 器 
的 根 目录 ， 如 图 6-43 所 示 。 


和 图 6-43 配置 本 地 物理 目录 


返回 【Internet Information Services ( IIS ) 
管理 器 窗口 ,在 网 站 瘤 格 中 选 捐 Default 
Web Site ]， 在 【操作 】 窗 格 单 击 【 浏览 网 
站 】 选项 卡 下 的 【 浏览 :80(http) ]， 即 可 浏 
览 网 站 的 默认 页 ， 如 图 6-44 所 示 。 


和 图 6-44, 浏 览 Web 站 点 


3. 配置 FTP 站 点 


在 【Internet Information Services ( IIS ) 管 
理 器 ] 窗口 中 的 【连接 】 窗 格 中 选中 本 地 服 
务 器 ， 右 击 执行 【添加 FTP 站 点 .… 】 命令， 
如 图 6-45 所 示 。 


和 图 6-45 添加 FTP 站 点 


在 弹出 的 【添加 FTP 站 点 】 对 话 框 中 设置 

【 FTP 站 点 名 称 】)， 然 后 即 可 单 击 【 浏览 ] 按 
钮 二 |, 设置 [ 物理 路 径 ] 为 “DAWebSites”， 
如 图 6-46 所 示 。 


@ 


FTP 站 点 名 称 (T): 


和 图 6-46 ,设置 站 点 信息 


在 更 新 的 对 话 框 中 设置 【SSL 】 为 “无 ”， 
禁止 FTP 站 点 的 SSL 加 密 功 能 ， 单 击 【 下 
一 步 】 按钮 ， 如 图 6-47 所 示 。 


填 (S)- 


下 一 步 (N) 


和 图 6-47 禁用 SSL 设置 


在 更 新 的 对 话 框 中 先 选中 【 匿名 【基本 】 
的 【身份 验证 ]， 然 后 设置 【 允许 访问 ] 为 
“所 有 用 户 "， 选 择 【 读 取 】 和 【 写 入 】 等 复 


选 框 ， 最 后 单 击 【 完成 】 按钮 , 如 图 6-48 | 加 打开 Web 浏览 器 ， 在 地 址 栏 中 输入 
“ftp://127.0.0.1/”"， 按 下 回 车 键 ， 即 可 打开 
此 FTP 站 点 ,测试 站 点 的 可 用 性 。 当 出 现 
如 图 6-50 所 示 之 效果 时 , 表示 FTP 站 点 配 
置 完成 。 


匿名 (A) 
基本 (B) 


该 职 (D) 
回 本 AW 


FTP 根 位 于 127.0.0.1 


若 要 在 文件 资源 管理 器 中 查看 此 FTP 站 点 ， 请 单 击 “视图 ”, 然后 
单 击 "在 文件 资源 管理 器 中 打开 FTP 站 点 ”。 


发 了 图 6-48 设置 授权 信息 03/24/2014 03:14 下 午 


返回 【Internet Information Services ( IIS ) 2 0 下 
管理 器 ] 窗口 ， 此 时 即 可 发 现在 【网 站 】 的 


目录 下 已 出 现 【Local Sites ] 的 项 目 ， 如 图 
人 /了 图 6-50 .测试 站 点 可 用 性 


[上 mm | FN | xan 


6.8 ”课堂 练习 : 管理 本 地 站 点 


在 使 用 Dreamweaver 开发 Web 网 站 时 , 需要 开发 者 创建 一 个 本 地 的 站 点 , 以 站 点 的 
方式 来 管理 Dreamweaver 中 的 各 种 资源 ， 将 其 归纳 和 整理 起 来 ， 方 便 相互 调用 。 
Dreamweaver 本 身 提供 了 站 点 管理 工具 ， 人 允许 开发 者 创建 、 编 辑 本 地 站 点 ， 并 调用 站 点 
的 相关 内 容 。 

本 练习 就 将 介绍 如 何 使 用 Dreamweaver CC 创建 本 地 站 点 ， 以 及 配置 本 地 站 点 的 方法 。 
操作 步骤 : 

在 Dreamweaver 中 执行 【站 点 ] |【 新 建站 
点 】 命令 ， 在 弹出 的 【 站 点 设置 对 象 ] 对 话 
框 中 , 设置 站 点 的 【 站 点 名 称 】 并 选择 [ 本 
地 站 点 文件 夹 ]， 如 图 6-51 所 示 。 

在 左 侧 的 列表 中 单 击 选择 【 服务 器 】 选 项 ， 
进入 服务 器 类 型 配置 ， 如 图 6-52 所 示 。 6-51 。 设 置 站 点 名 称 与 目录 


山口 站 
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和 图 6-52 配置 服务 器 


在 更 新 的 对 话 框 中 单 击 [ 服务 器 列表 ] 左下 

方 的 【添加 新 服务 器 ] 按钮 国 ， 如 图 6-53 | 《7 图 6-54. 绑 定 FTP 服务 器 

所 示 。 加 单 击 【 高 级 ] 按钮， 切换 至 服务 器 的 高 级 配 
置 ， 设置 [ 服务 器 模型 的 参数 ,诸如 ASP 
VBScript、PHP MySQL 等 ， 然 后 即 可 单 击 
【保存 】 按钮 ， 如 图 6-56 所 示 。 


和 图 6-53 .添加 新 服务 器 


在 更 新 的 对 话 框 中 设置 [ 服务 器 名 称 】 等 服 
务 器 的 相关 属性 ， 将 本 地 IIS 服务 器 的 FTP 
站 点 与 Dreamweaver 绑 定 ,如 图 6-54 所 示 。 | 全 图 6-55。 测 试 FTP 服务 器 配置 


单 击 【 测试 ] 按钮 ， 测 试 FTP 服务 器 是 否 在 创建 站 点 之 后 ， 开 发 者 即 可 通过 【文件 】 


配置 成 功 。 如 图 6-55 所 示 则 表示 配置 完全 面板 来 查看 当前 站 点 的 内 容 ， 并 通过 FTP 
成 功 ， 此 时 开发 者 可 单 击 【 确定 ] 按钮 ， 关 功能 与 本 地 服务 器 同步 数据 ， 如 图 6-57 
闭 测试 提示 对 话 框 。 所 示 。 


和 图 6-56 配置 服务 器 模型 
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源 ? 
一 、 填 空 是 | 
A、 图 像 
1. 静态 网 页 通常 由 、 B、 音 频 
以 及 各 种 相关 多 媒体 次 C、 三 维 模型 
源 组 成 。 加 D、 视 频 
和 2，Dreamweaver 无 法 直接 编辑 以 下 哪 种 数 
以 及 的 支持 。 a 
3. Dreamweaver CC 提供 了 | 
以 及 等 4 种 A、HTML 代码 
视图 模式 。 B、CSS 样式 表 
4. 开发 者 可 以 通过 CISeript 丢 本 代码 
以 及 等 方式 来 拆 分 视图 。 D、 网 页 图 像 
5. 文本 是 网 页 文档 中 最 基本 的 显示 内 容 ， 3. 以 下 哪 种 Dreamweaver 工具 可 以 直接 将 
其 通常 由 各 种 编码 的 、 组 Photoshop 设计 方案 导入 到 网 页 文档 中 ? 
成 。 
6， 开 发 者 可 以 为 网 页 文档 插入 的 图 像 主要 A、【 插 入 ] 面板 
» 入 
以 及 是 B、【 属 性 】 检 查 器 
C、【Extract】 面 板 
7。 在 为 网 页 文档 插入 高 清晰 度 的 照片 时 ， 
可 采用 格式 。 、【 代 码 片段 】 面 板 
4. Dreamweaver 的 【属性 】 检 查 器 无 法 实 
二 、 选 择 题 现 以 下 哪 种 文字 处 理 功能 ? 
1. 静态 网 页 无 法 采用 以 下 哪 种 多 媒体 次 A、 对 齐 


持 ? 


B、 加 粗 
C、 倾 斜 
D、 下 划 线 
5. 以 下 哪 种 图 像 格 式 不 被 Web 浏览 器 所 支 


A、 PSD 
B、 JPEG 
C、GIF 

D、 PNG 


三 、 简 答题 


[ 


Web 站 点 通常 由 哪些 部 分 构成 ? 各 部 分 


的 作用 都 是 什么 ? 


.如 何 创建 普通 段落 文本 和 标题 文本 ? 
， Web 浏览 器 通常 都 支持 哪些 图 像 类 型 ? 
.如 何 插入 图 像 链接 以 及 文本 链接 ? 
如何 修改 链接 目标 的 打开 方式 ? 


人 mm 上 wm 


如 何 切换 Dreamweaver 的 视图 ? 
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HTML 5 结构 语言 


7.1 HTML 技术 概述 


| 


注 障 基 习 籼 
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传统 的 网 页 文档 采用 HIML 4.01 或 XHTML 1.0 等 结构 语言 来 编写 网 页 内 容 、 组 织 
网 页 内 容 的 结构 。 但 是 这 两 种 结构 语言 在 其 本 身 定位 上 具有 一 定 的 局 限 性 ， 其 由 SGML 
这 种 用 于 学 术 文档 的 结构 语言 发 展 而 来 ， 更 多 面向 电子 文档 的 显示 和 打印 输出 ， 虽 然 对 
文本 、 图 像 以 及 各 种 文档 结构 标记 具备 完善 的 支持 ， 但 在 多 媒体 方面 的 功能 (如 动画 、 
矢量 图 形 、 视 频 、 音 频 等 ) 以 及 交互 组 件 方面 支持 性 较 差 。 
因此 , 在 使 用 这 些 结构 语言 编写 的 网 页 文档 中 , 多 媒体 内 容 更 多 依赖 Flash、 Windows 
Media Player 等 第 三 方 插件 来 实现 , 而 交互 组 件 则 更 多 依赖 开发 者 通过 JavaScript 脚本 语 
言 来 自行 编写 。 

这 种 对 插件 的 依赖 机 制 和 简单 交互 组 件 支持 的 优点 是 可 以 降低 结构 语言 本 身 的 复 
杂 程 度 ， 同 时 降低 开发 者 的 学 习 曲 线 ， 开 发 者 在 使 用 这 些 结构 语言 时 完全 可 以 借助 各 种 
可 视 化 开发 工具 快速 开发 网 站 ， 无 需 了 解 复杂 的 HTML 语法 。 

然而 ， 这 一 特性 也 直接 导致 其 在 发 布 数据 时 必须 受 限 于 普通 计算 机 平台 ， 在 对 第 三 
方 插件 支持 性 能 较 差 的 手机 、PDA、 平 板 电脑 等 移动 设备 上 ，HTML 和 XHTML 的 应 用 
十 分 有 限 ， 无 法 直接 为 终端 用 户 提供 矢量 图 形 、 动 画 、 音 频 和 视频 的 展示 功能 。 同 时 ， 
简单 的 交互 组 件 也 逐渐 无 法 满足 终端 用 户 对 网 站 交互 越 来 越 苛刻 的 需求 。 

传统 的 HTML 和 XHTML 在 语义 化 方面 的 功能 也 十 分 层 弱 的 , 在 使 用 这 两 种 结构 语 
言 为 网 站 项 目 布局 时 , 很 多 开发 者 往往 采用 DIV 标记 包 打 天 下 的 方式 来 设计 各 种 网 站 显 
示 容 器 ， 使 得 搜索 引擎 无 法 有 效 地 快速 抓 取 网 站 内 容 ， 降 低 了 网 站 被 搜索 引擎 的 检索 
几率 。 

基于 以 上 理由 ，W3C 重 构 了 HTML， 定 义 了 下 一 代 标 准 化 的 Web 结构 语言 ， 就 是 
HTML 5。 相 比 XHTML, HTML 5 采用 了 更 加 简化 的 语法 ， 并 对 音频 、 视 频 、 矢 量 图 形 、 
地 理 定位 、Web 前 端 即时 存储 、 结 构 语义 化 等 现代 响应 式 网 页 需求 进行 了 增强 。 今 天 的 
HTML 5 已 经 逐步 在 取代 传统 的 HIML 和 XHTML， 在 移动 互联 网 甚至 传统 互联 网 方面 
发 挥 更 多 的 作用 。 


全 新 设计 的 HTML 5 结构 语言 采纳 了 HTML 4.01 以 及 XHTML 1.0 等 传统 Web 结构 
语言 的 优点 ， 具 备 严谨 的 结构 ， 同 时 也 根据 现代 互联 网 的 实际 需求 ， 新 增 了 更 多 现代 结 
构 语 言 的 特性 ， 其 主要 包括 以 下 几 点 。 


1. 单一 文档 模式 


传统 的 HIML 和 XHTML 为 保持 向 下 兼容 性 , 定义 了 三 种 网 页 文档 的 模式 ， 即 过 渡 
模式 〈Transitional) 、 严 格 模式 〈Strict) 和 框架 模式 〈Frameset) ， 这 三 种 模式 中 ， 过 
渡 模式 主要 用 于 兼容 HIML 3.2 等 更 旧版 本 的 结构 语言 宽松 语法 ， 保 持 页 面 文档 的 兼容 
性 ;严格 模式 采用 更 加 规范 和 严谨 的 模式 ， 以 保障 文档 的 可 读 性 与 维护 性 ， 消 除 代 码 歧 
义 ; 框架 模式 主要 用 于 框架 网 页 ， 即 同时 调用 多 个 外 部 文档 内 容 的 网 页 。 


在 HTML 5 中 , 完全 据 弃 了 对 旧版 本 HIML 宽松 语法 , 完全 要 求 开发 者 以 更 加 严格 
的 语法 来 编码 。 另 外 ，HTML 5 也 删除 了 对 框架 网 页 的 支持 ， 要 求 开发 者 完全 以 嵌入 帧 
(IFRAME 标记 ) 的 方式 来 嵌入 外 部 网 页 文档 ， 以 使 网 页 文档 的 代码 可 读 性 更 优越 。 因 
此 ，HTML 5 不 再 需要 区 分 三 种 文档 模式 ， 只 需要 一 种 标准 模式 即 可 满足 所 有 需求 。 


2. 语义 化 结构 标记 的 支持 


传统 的 HIML 和 XHTML 结构 语言 对 文档 的 语义 化 支持 不 足 , 在 使 用 这 些 结构 语言 
布局 网 页 时 ， 需 要 大 量 使 用 不 体现 任何 语义 化 内 容 的 文档 层 标记 DIV， 使 得 网 页 文档 内 
布 满 了 令 人 眼花 练 乱 的 DIV 结构 ， 使 网 页 文档 的 代码 可 读 性 变 成 灾难 ， 也 不 利于 搜索 引 
敬 对 网 页 文档 的 检索 。 

HTML 5 提供 了 一 系列 语义 化 的 结构 标记 ， 用 于 实现 特定 的 文档 内 容 支 持 ， 诸 如 文 
档 头 标记 HEADER、 文 档 导 航标 记 NAV、 文 档 文章 标记 ARTICLE、 文 档 分 节 标 记 
SECTION、 侧 栏 标记 ASIDE、 页 脚 标 记 FOOTER 等 。 这 些 语义 化 的 结构 标记 将 开发 者 
从 DIV 结构 中 解放 出 来 ,增强 了 网 页 文档 的 语义 化 结构 ， 也 使 得 搜索 引擎 能 更 加 方便 地 
检索 网 页 内 容 。 


3. 多 媒体 支持 


HTML 5 结构 语言 预 置 了 对 MP4、Ogg、WebM 等 视频 格式 以 及 Ogg、Mp3、Wav 
等 音频 格式 的 直接 编 解 码 支持 ， 并 预 置 了 一 批 相关 的 方法 来 控制 这 些 媒 体 类 型 的 播放 ， 
这 使 得 终端 用 户 的 设备 无 须 再 安装 任何 插件 即 可 直接 播放 这 些 视频 与 音频 。 

除 此 之 外 ， 还 增强 了 Canvas 矢量 图 形 技术 的 支持 ， 允 许 开发 者 直接 通过 JavaScript 
脚本 语言 在 网 页 中 绘制 矢量 图 形 。 除 此 之 外 ，HTML 5 还 增强 了 SVG 矢量 图 形 格式 的 支 
持 ， 允 许 开 发 者 以 XML 结构 语言 来 定义 矢量 图 形 ， 增 强 了 网 页 的 表现 能 力 。 


4. 地 理 定位 机 制 


HTML 5 结构 语言 内 置 了 Geolocation 对 象 , 可 以 在 终端 用 户 许可 的 情况 下 通过 网 页 
浏览 器 直接 获取 其 地 理 位 置 ， 从 而 根据 该 位 置 来 为 终端 位 置 提供 更 加 丰富 的 Web 服务 。 


5. 本 地 存储 


传统 的 网 站 通过 Cookie 来 在 终端 用 户 的 计算 机 中 存储 各 种 交互 过 程 中 的 数据 。 但 是 
Cookie 本 身 存在 两 个 问题 ， 首 先 Cookie 本 身 存 储 数据 必须 依赖 服务 器 的 请 求 ， 并 不 适 
合 存储 大 量 的 数据 ， 其 效率 较 低 ， 其 次 ，Cookie 本 身 也 存在 一 定 的 安全 问题 ， 一 些 敏感 
信息 一 旦 存储 到 终端 用 户 计算 机 中 ， 很 容易 被 一 些 恶意 程 序 获取 。 

HIML 5 结构 语言 提供 了 localStorage 对 象 和 sessionStorage 对 象 ， 用 于 帮助 开发 者 
通过 JavaScript 脚本 语言 快速 在 终端 用 户 的 本 地 计算 机 中 存储 永久 数据 和 基于 会 话 的 临 
时 数据 ， 提 高 存储 效率 并 降低 信息 泄露 的 风险 。 


6， 离线 缓存 


HTML 5 结构 语言 首次 在 网 页 结构 文档 中 引入 了 离线 缓存 这 一 概念 ， 允 许 网 站 项 目 
在 终端 用 户 本 地 计算 机 中 缓存 数据 ， 使 终端 用 户 可 以 在 没有 互联 网 连接 时 仍然 能 够 通过 
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离线 缓存 来 访问 数据 。 
7. 新 交互 组 件 的 支持 


传统 的 网 页 文档 在 为 终端 用 户 提供 输入 组 件 支持 时 ， 通 常 只 支持 一 些 基 本 的 交互 组 
件 ， 诸 如 文本 框 、 单 选 按 钮 、 复 选 框 、 下 拉 菜 单 、 列 表 框 、 按 钮 、 密 码 域 、 文 本 区 域 等 。 
这 些 交 互 组 件 只 能 满足 终端 用 户 最 基本 的 交互 需求 。 

HTML 5 结构 语言 为 开发 者 提供 了 更 加 丰富 的 交互 组 件 支持 ， 人 允许 开发 者 通过 输入 
标记 INPUT 的 属性 设置 ， 辅 助 终端 用 户 输入 诸如 电子 邮件 、URL 地 址 、 数 字 、 范 围 限 
定 值 、 日 期 选择 器 、 搜 索 框 和 颜色 拾取 器 等 。 这 些 富 交 互 组 件 的 支持 ， 使 得 HTML 5 结 
构 语言 可 以 为 终端 用 户 提供 更 好 的 交互 体验 。 


7.2 HTMLS 文档 结构 


传统 的 HIML 4.01 和 XHTML 1.0 通过 三 种 文档 类 型 来 实现 过 渡 模 式 、 严 格 模式 和 
框架 模式 ， 但 在 HIML 5 结构 语言 中 ， 只 需要 通过 一 种 标准 的 文档 类 型 即 可 满足 所 有 类 
型 网 页 文档 的 需求 ， 实 现 整体 的 结构 布局 和 内 容 语义 。 


HTML 5 结构 语言 本 身 与 HIML 4.01 和 XHTML 1.0 的 文档 类 型 有 所 区 别 ， 但 其 文 
档 结构 都 由 根 元 素 标记 HIML、 文 档 头 标记 HEAD、 文 档 主体 标记 BODY 组 成 。 


1. 文档 类 型 声明 


HIML 5 需要 在 整个 文档 之 前 首先 通过 DOCTYPE 标记 声明 文档 的 类 型 ， 然 后 再 通 
过 HTML 根 元 素 标记 来 构成 整个 文档 。 典 型 的 HTML 文档 包含 以 下 结构 。 
<!DOCTYPE HTML> 
<html> 
<head> 
<title> 文 档 标题 </title> 
</head> 


<body> 

文档 主体 内 容 
</body> 
</html> 


在 HTML 5 结构 文档 中 ，DOCTYPE 标记 必须 位 于 整个 网 页 文档 的 首 行 ， 其 本 身 不 
属于 HIML 标记 ， 而 是 一 条 指令 ， 用 于 告知 Web 浏览 器 当前 网 页 文档 采用 的 是 什么 标 


2. 根 元 素 标记 及 其 子 集 


在 DOCTYPE 标记 之 后 ， 紧 随 的 是 根 元 素 标记 HTML， 该 标记 为 所 有 其 他 HIML 
标记 的 唯一 根 集 ， 一 个 HIML 5 网 页 文档 只 能 有 一 个 根 元 素 标记 HTML。 在 HIML 5 结 
构 语 言 中 , 开发 者 不 需要 为 根 元 素 标记 添加 命名 空间 (这 点 与 XHTML 结构 语言 不 同 ) 。 

根 元 素 标记 HTML 应 有 也 只 能 有 两 个 子 集 ， 即 文档 头 标记 HEAD 和 文档 主体 标记 
BODY。 文档 头 标 记 HEAD 和 文档 主体 标记 BODY 不 允许 存在 嵌 套 关系 ,其 必须 为 同 级 
并 列 关系 ， 且 文档 头 标记 HEAD 必须 在 文档 主体 标记 BODY 之 前 。 


HTML 5 结构 语言 的 文档 头 结构 与 XHTML 1.0 结构 语言 最 为 类 似 , 其 支持 6 种 子 集 
标记 ， 分 别 包 括 基 准 路 径 标记 BASE、 外 链 标记 LINK、 元 数据 标记 META、 脚 本 标记 
SCRIPT、 样 式 标记 STYLE 以 及 标题 标记 TITLE 等 。 

其 中 ， 标 题 标 记 TITLE 为 文档 头 标记 HEAD 的 必须 子 集 ， 也 就 是 说 ， 每 一 个 文档 
头 标记 HEAD 都 必须 内 嵌 一 个 标题 标记 TITLE。 

文档 头 标记 HEAD 对 其 内 部 子 集 标记 之 间 的 顺序 没有 硬性 规定 , 开发 者 可 以 根据 实 
际 的 个 人 习惯 来 书写 其 内 部 的 标记 。 但 需要 注意 的 是 ， 如 果 开 发 者 需要 定义 基准 路 径 ， 
则 应 将 其 书写 到 文档 头 标 记 HEAD 内 的 最 上 方 。 这 5 种 文档 头 标记 HEAD 的 子 集 用 法 
如 下 。 


1， 基 准 路 径 标记 


该 标记 的 作用 是 在 当前 网 页 文档 中 声明 一 个 基本 的 URL 地 址 ， 用 于 为 所 有 超 链 接 、 
图 像 、 动 画 、 视 频 、 音 频 等 网 页 元 素 提供 引用 路 径 的 基本 参考 值 ， 其 可 以 作用 于 超 链接 
标记 A、 图 像 标 记 IMG、 外 链 标记 LINK、 表 单 标记 FORM、 视 频 标记 Video 和 音频 标 
记 Audio 等 。 

应 用 基准 路 径 标记 BASE 之 后 ， 所 有 网 页 文档 内 的 路 径 都 将 以 基准 路 径 为 基础 来 扩 
展 ， 例 如 ， 当 定义 基准 路 径 为 “http:/www.microsoft.com/” 之 后 ， 再 引用 该 站 点 的 图 像 
时 ， 只 需要 书写 图 像 针 对 该 基准 路 径 的 相对 路 径 即 可 ， 代 码 如 下 。 


<head> 
<base href="http://www.microsoft.com/" /> 
<title> 测 试 网 页 </title> 

</head> 

<body> 
<img src="eg smile.gif" /> 


9STALH 朝 和 N 潍 


DH 


g 
构 


语 
言 


<a href="#">Microsoft</a> 
</body> 


2. 外 链 标记 

外 链 标 记 LINK 的 作用 是 将 外 部 的 CSS 样式 表 文 件 加 载 和 导入 到 当前 文档 中 。 外 链 
标记 LINK 只 能 出 现在 文档 头 标记 HEAD 中 ， 开 发 者 可 以 同时 使 用 多 个 外 链 标记 LINK 
以 导入 多 个 CSS 样式 表 文 件 ， 代 码 如 下 。 


<head> 
<link rel="stylesheet" type="text/css" href="theme.css" /> 


<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 


在 HTML 5 结构 语言 中 ， 外 链 标记 LINK 支持 以 下 一 些 属性 ， 如 表 7-1 所 示 。 
2 表 7-1 。 外 链 标记 的 属性 


作 用 
链接 外 部 样式 表 的 URL 地 址 
链接 外 部 样式 表 
定义 外 链 文档 用 于 PC 显示 器 或 其 他 计算 机 屏幕 
定义 外 链 文档 用 于 电 传 打字 机 以 及 类 似 的 使 用 等 宽 字符 网 格 的 媒介 
定义 外 链 文档 用 于 电视 机 类 型 设备 〈 低 分 辩 率 、 有 限 的 滚屏 能 力 ) 
定义 外 链 文档 用 于 放映 机 
定义 外 链 文档 用 于 手持 设备 〈 小 屏幕 、 有 限 带宽 ) 
定义 外 链 文档 用 于 打印 预览 模式 /打印 页 面 
定义 外 链 文档 用 于 盲人 点 字 法 反馈 设备 


定义 外 链 文 档 用 于 语音 合成 器 

定义 外 链 文档 适用 于 所 有 设备 

定义 外 链 文档 与 网 页 文档 的 关系 〈 仅 支持 stylesheet) 
定义 外 链 文档 的 MIME 类 型 〈 仅 支持 text/css) 


标准 的 HTML5 结构 语言 语法 为 外 链 标记 LINK 提供 了 多 种 文档 关系 属性 rel 的 值 和 
MIME 类 型 值 ， 但 是 在 实际 的 开发 中 ，Web 浏览 器 仅 支 持 rel 属性 的 “stylesheet” 值 和 
type 属性 的 “text/css” 值 。 

3，. 标题 标记 

标题 标记 TITLE 的 作用 是 定义 整个 网 页 文档 的 标题 。 通 常情 况 下 ， 网 页 浏览 器 在 现 
实 网 页 文档 时 ， 会 在 浏览 器 窗口 〈 或 选项 卡 ) 的 标题 栏 或 选项 卡 栏 上 显示 由 标题 标记 
TITLE 定义 的 文档 标题 。 

标题 标记 TITLE 在 文档 头 标记 HEAD 中 的 存在 是 唯一 的 ， 也 就 是 说 ， 每 个 网 页 文 
档 只 能 在 文档 头 标记 HEAD 内 存放 一 个 标题 标记 TITLE, 在 下 面 的 代码 中 ， 就 定义 了 一 
个 简单 的 标题 标记 ， 代 码 如 下 。 


<html> 
<head> 


<title>HTML Tag Reference</title> 
</head> 
<body>The content of the document...... </body> 
</html> 


4. 样式 标记 


样式 标记 STYLE 的 作用 是 存放 当前 网 页 文档 内 部 的 CSS 样式 表 代码 ， 以 定义 网 页 
文档 内 各 网 页 元 素 的 样式 。 在 下 面 的 代码 中 ， 就 为 网 页 文档 编写 了 一 段 CSS 代码 ， 以 定 
义 段 落 文本 的 样式 ， 代 码 如 下 。 

<head> 

<style type="text/css"> 
p { text-indent : 2em ; } 
</style> 

</head> 


样式 标记 STYLE 支持 两 种 属性 ， 即 type 属性 和 media 属性 ， 这 两 种 属性 的 用 法 和 
相关 属性 值 与 外 链 标记 LINK 的 同名 属性 相同 ， 在 此 将 不 再 袭 述 。 

5. 脚本 标记 

脚本 标记 SCRIPT 的 作用 是 存放 当前 网 页 文档 内 部 的 JavaScript 脚本 代码 ， 以 为 网 
页 文档 中 的 元 素 提 供 交 互 行为 功能 。 在 下 面 的 代码 中 ， 就 为 网 页 文档 编写 了 一 段 
JavaScript 代码 ， 通 过 脚本 标记 SCRIPT 输出 “HelloWorld” 信 息 ， 代 码 如 下 。 

<script type="text/javascript"> 


document .write ( 'Hello World!' ) ; 
</script> 


脚本 标记 SCRIPT 也 支持 一 些 属 性 ， 用 于 定义 脚本 的 性 质 以 及 外 链 脚本 的 方式 ， 如 
表 7-2 所 示 。 
3 表 7-2 脚本 标记 SCRIPT 的 属性 


定义 该 标记 所 链接 的 外 部 脚本 以 异步 的 方式 执行 
定义 该 标记 所 链接 的 外 部 脚本 的 字符 集 编码 


定义 对 该 标记 内 含 或 者 链接 的 脚本 仅 有 在 页 面 加 载 完毕 时 才 开 始 执行 
定义 链接 外 部 脚本 的 URL 地 址 
必 选 项 ， 脚 本 的 MIME 类 型 ,通常 为 “text/javascript” 或 “text/vbscript” 


虽然 所 有 的 Web 浏览 器 都 支持 脚本 标记 SCRIPT， 以 及 其 type 必 选 属性 ， 但 是 在 绝 
大 多 数 浏览 器 中 ， 脚 本 标记 SCRIPT 只 有 当 type 属性 值 为 “textjavascript” 时 才 会 被 支 
持 ， 只 有 微软 正 浏览 器 支持 脚本 标记 SCRIPT 的 type 属性 值 为 “text/vbscript”。 

脚本 标记 SCRIPT 并 非 只 能 书写 在 网 页 文档 的 文档 头 标 记 HEAD 中 , 实际 上 该 标记 
也 可 以 被 书写 在 文档 主题 标记 BODY 的 内 部 ,尤其 在 该 标记 的 末尾 书写 , 可 以 使 浏览 器 
优先 加 载 网 页 文档 的 结构 、 内 容 和 样式 ， 提 高 页 面 显示 的 效率 。 
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文档 主体 结构 是 网 页 文档 的 主体 内 容 ， 其 作用 是 存放 各 种 向 终端 用 户 展示 的 数据 。 
通常 情况 下 ， 一 个 标准 的 文档 会 分 为 页 眉 、 导 航 、 文 章 内 容 、 侧 栏 和 页 脚 5 个 部 分 ， 典 
型 的 一 个 网 页 文档 如 图 7-1 所 示 。 


普通 感冒 ， 你 真 的 了 解 它 吗 ? OO 


健康 朝 九 网 五 发 去 于 2014-10-10 17:27 


又 到 了 忽 冷 忽 热 爱 感冒 的 季节 。 感 置 对 于 每 一 个 人 来 说 都 不 陌生 ,确实 这 是 一 种 常见 |。 果 帝 网 刍 康 蝴 刀 胸 五 宫 方 号 
的 不 能 再 常见 的 疾病 了 。 不 过 如 果 你 花 上 时 间 好 好 算 算 ,在 人 的 一 生 中 ,可 能 加 起 来 

会 有 5 年 的 时 间 都 在 妨 受 鼻塞 、 咳 欧 、 头 疼 、 咽 冯 等 感 置 所 带 来 的 症状 团 扰 ,可 能 还 有 | ”作者 的 其 他 文章 

梅 近 1 年 的 时 间 因 为 感冒 卧病 在 床 。 


感冒 英文 中 常用 “COLD” 一 词 ， 可 是 感冒 和 寒冷 有 什么 关系 呢 ? 是 因为 受凉 才 感 
冒 ? 还 是 因为 感冒 时 候 觉得 冷 ? 还 是 感冒 在 寒冷 的 季节 高 发 ? 其 实 ， 这 两 者 几乎 就 没 
有 什么 关系 。 


你 的 评论 钻 体 应 当 如 何 限 通 目 条? 


请 登录 发 表 评 论 


关于 我 们 。 加 入 困 吉 。 妊 体 报道 帮助 中 心 。 内容 专区 。 免责 声明 。 联系 我 们 。 夭 动 版 称 动 应用 
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和 图 7-1 ,一 个 简单 的 网 页 文档 


在 图 7-1 中 以 数字 编号 和 算 形 选 框 标 出 了 网 页 文档 的 5 个 组 成 部 分 ， 即 1- 页 眉 、2- 
导航 、3- 文 章 、4- 侧 栏 以 及 5- 页 脚 等 。 

HTML 5 增强 了 网 页 文档 的 语义 化 特性 ， 新 增 了 一 系列 语义 化 的 标记 来 帮助 开发 者 
实现 文档 内 容 中 各 部 分 的 语义 。 典 型 的 一 个 语义 化 文档 主体 结构 代码 如 下 。 


<body> 
<header> 
过 LE 页 周二 > 
</header> 
<nav><!-- 导 航 --></nav> 
<article> 


在 上 面 的 代码 中 ， 文 档 主体 标记 BODY 包含 了 5 种 子 元 素 标记 ， 包 括 页 眉 标 记 
HEADER 导航 标记 NAV、\ 文 章 标记 ARTICLE、 侧 栏 标记 ASIDE 以 及 页 脚 标 记 FOOTER 
等 。 这 些 语 义 化 标记 的 出 现 ， 使 得 开发 者 不 再 需要 像 使 用 HTML 4.01 和 XHTML 1.0 时 
一 样 大量 采 用 文档 层 标记 DIV 来 解决 问题 ， 而 是 代 之 以 更 加 语义 化 的 方式 实现 文档 
布局 。 


1. 页 眉 标 记 


页 局 标记 HEADER 的 作用 是 在 文档 顶部 存放 一 些 用 于 介绍 文档 信息 的 相关 内 容 ， 
诸如 网 站 的 Logo、 简 短 导航 信息 、 用 户 登录 的 状况 以 及 一 些 快捷 按钮 (如 搜索 、 可 用 的 
服务 ) 等 。 页 眉 标记 HEADER 是 HTML 5 新 增 的 语义 标记 ， 其 语法 使 用 上 与 原文 档 层 
标记 DIV 大 体 类 似 ， 在 此 将 不 再 獒 述 。 


2. 导航 标记 


导航 标记 NAV 的 作用 是 在 文档 中 显示 一 个 导航 条 ， 为 终端 用 户 提供 从 当前 网 页 跳 
转 至 其 他 网 页 文档 的 快捷 方式 。 在 XHTML 1.0 时 代 ， 很 多 开发 者 都 会 通过 设置 文档 层 
标记 DIV 的 id 属性 为 nav 来 实现 语义 化 的 导航 ,在 HIML 5 中 ,直接 使 用 导航 标记 NAV 
即 可 。 

导航 标记 NAV 内 可 以 放置 绝 大 多 数 HTML 的 文本 、 列 表 等 标记 (当然 也 可 以 放置 
表格 ， 虽 然 在 此 不 推荐 这 么 做 ) 。 典 型 的 导航 代码 如 下 所 示 。 


导航 标记 NAV 不 仅 可 以 被 放置 在 页 眉 标记 HEADER 之 后 和 文章 标记 ARTICLE 之 
前 ， 也 可 以 被 放置 在 这 两 个 标记 之 内 ， 具 体 的 结构 位 置 应 根据 页 面 结构 设计 而 定 。 


3. 文章 标记 
文章 标记 ARTICLE 也 是 HTML 5 新 增 的 语义 化 标记 ， 其 作用 是 存储 网 页 文档 要 向 
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终端 用 户 展示 的 内 容 ， 包 括 标题 、 段 落 、 小 节 、 播 图、 表格 乃至 分 类 项 目 等 。 通 常情 况 
下 文章 标记 ARTICLE 可 用 作 论 坛 帖子 、 报 纸 文章 、 博 客 条 目 以 及 用 户 的 评论 内 容 等 。 
文章 标记 ARTICLE 的 用 法 与 XHTML1.0 中 的 文档 层 标记 DIV 类 似 ， 在 此 将 不 再 
著述 。 
4. 侧 栏 标记 


侧 栏 最 初 在 网 页 设计 中 仅仅 是 一 个 布局 方式 的 概念 。 早 期 的 网 页 文档 并 没有 对 页 面 
的 内 容 过 于 详细 划分 ， 所 有 布局 元 素 往往 都 以 文档 层 标记 DIV 的 方式 划分 ， 并 通过 CSS 
样式 表 定 义 各 种 文档 层 的 位 置 。 

随 着 文档 布局 设计 的 发 展 ， 网 站 界面 通常 由 自 上 至 下 流动 式 布局 逐渐 发 展 为 主 侧 
栏 、 左 中 右 三 栏 乃 至 更 多 分 栏 、 和 矩阵 等 方式 来 布局 。 在 这 些 复杂 网 页 布局 中 ， 侧 栏 代 表 
的 就 是 页 面 左 侧 或 者 右 侧 的 内 容 区 域 ， 主 要 用 于 显示 对 当前 页 面 内 容 的 介绍 、 总 结 、 提 
纲 或 者 一 些 附 加 的 信息 等 。 

在 HIML 5 中 ， 首 次 提出 侧 栏 标记 ASIDE 这 一 概念 ， 将 侧 栏 的 附加 信息 作为 语义 
内 容 ， 将 之 与 文档 的 文章 内 容 划 分 开 来 ， 允 许 开发 者 单独 定义 这 一 模块 内 容 。 侧 栏 标记 
ASIDE 的 用 法 也 与 文章 标记 ARTICLE 类 似 ， 都 可 以 支持 各 种 显示 内 容 。 通 常情 况 下 ， 
侧 栏 标记 ASIDE 会 被 存放 在 网 页 文档 内 文章 标记 ARTICLE 之 后 。 每 个 HIML 5 文档 只 
能 有 一 个 侧 栏 标记 ASIDE， 即 只 能 有 一 个 侧 栏 。 


5. 页 脚 标 记 


在 网 页 设计 中 ,页 脚 区 域 的 作用 是 显示 简介 类 导航 、 版 权 声明 等 相关 信息 。HITML 5 
将 该 区 域 的 内 容 以 语义 化 的 方式 从 网 页 主体 剥离 ， 使 之 成 为 一 个 独立 的 模块 ， 并 提供 了 
语义 化 的 页 脚 标记 FOOTER。 

与 侧 栏 标记 ASIDE 不 同 , 每 个 HTML 5 网 页 文档 可 以 拥有 多 个 页 脚 标 记 FOOTER， 
由 这 些 页 脚 标记 共同 组 成 网 页 文档 的 页 脚 。 


HTML 5 结构 语言 基本 继承 了 XHTML 1.0 结构 语言 对 文本 内 容 的 处 理 , 以 保障 对 之 
前 版 本 网 页 文档 的 兼容 性 。 但 在 文章 内 容 的 分 节 处 理 方面 新 增加 了 名 为 分 节 标记 
SECTION 的 新 标记 ， 增 强 了 文本 内 容 的 语义 化 结构 处 理 。 


一 般 网 页 文章 通常 会 包含 标题 以 及 若干 分 节 ， 其 中 ， 标 题 用 于 对 文章 各 章节 、 小 节 


进行 引领 和 总 结 ， 分 节 则 用 于 存放 文章 章节 、 小 节 等 语义 元 素 的 内 容 。 
1. 文章 的 标题 


标题 是 位 于 文章 开头 、 章 节 开 头 的 ， 用 于 标明 文章 、 作 品 等 内 容 的 简短 语句 。 标 题 
通常 以 简洁 的 方式 阐述 下 文 的 中 心 含义 。 在 Web 页 中 ,标题 元 素 具 有 特殊 的 意义 ,通常 
情况 下 ， 搜 索引 擎 的 检索 功能 会 优先 处 理 页 面 的 关键 字 以 及 页 内 的 标题 元 素 。 因 此 ， 合 
理 地 使 用 标题 元 素 ， 可 以 使 Web 文档 的 结构 更 加 语义 化 ， 更 容易 被 搜索 引擎 检索 。 

HTML 5 继承 了 XHTML 的 6 种 标题 标记 ， 分 别 为 HI、H2、H3、H4、H5 和 H6， 
于 表示 文档 中 的 一 级 标题 到 六 级 标题 , 基本 可 以 满足 一 般 Web 文档 的 排版 和 语义 化 需 
求 。 下 面 的 代码 就 分 别 定义 了 这 六 种 标题 ， 如 下 所 示 。 

<h1> 第 一 章 ”这 里 是 一 级 标题 </h1> 

<h2>1.1 这 里 是 二 级 标题 </h2> 

<h3>1.1.1 这 里 是 三 级 标题 </h3> 

<h4>1.1.1.1 这 里 是 四 级 标题 </h4> 


<h5>1.1.1.1.1 这 里 是 五 级 标题 </h5> 
<h6>1.1.1.1.1.1 这 里 是 六 级 标题 </h6> 


在 默认 状态 下 ，Web 浏览 器 将 这 6 种 标题 加 粗 显 示 ， 并 会 根据 标题 的 级 别 来 决定 其 


显示 的 字符 尺寸 ， 如 图 7-2 所 示 。 
a 第 一 章 这 里 是 一 级 标题 
1.1 这 里 是 二 级 标题 

早期 的 HTML 4.01 或 XHTML 1.0 结构 语 “11.1 这 里 是 三 级 标题 
言 通过 两 种 标记 来 为 网 页 文档 的 文章 内 容 分 “1111 这 里 是 级 标题 
节 ， 在 需要 划分 块 级 别 的 分 节 时 ， 采 用 文档 层 “wn wm 和 gt 
标记 DIV， 而 需要 划分 行内 节 时 则 使 用 内 联 跨 msesrnews 
度 标记 SPAN， 这 两 种 标记 的 作用 更 多 地 偏向 了 Wp = 
于 网 页 视觉 中 的 布局 ， 通 常用 于 实现 独立 的 块 。 人 因 二 2 一 六 直 标 二 的 显示 效果 
元 素 和 内 联 元 素 。 

在 HIML 5 中 ,特别 定义 了 一 个 文档 节 标 记 SECTION， 该 标记 用 于 实现 语义 化 的 
章节 、 小 节 ， 可 对 整 篇 文章 进行 分 段 ， 以 更 加 语义 化 的 方式 处 理 较 长 的 文章 。 使 用 该 标 
记 可 以 更 好 地 规划 文章 的 层次 结构 ， 代 码 如 下 。 

<h1> 清 华 大 学 出 版 社 </h1> 

<section cite="http://www.tup.com.cn/gywm/default .asp"> 

<p> 清 华 大 学 出 版 社 成 立 于 1980 年 6 月 , 是 由 教育 部 主管 、 清华 大 学 主办 的 综合 出 版 单位 。 
植 根 于 “清华 ”这 座 和 久负盛名 的 高 等 学 府 ， 秉 承 清华 人 “自强 不 息 ， 厚 德 载 物 ” 的 人 文 精神 ， 清 华 大 
学 出 版 社 在 短 短 二 十 多 年 的 时 间 里 ， 迅 速成 长 起 来 。</P> 

<p> 清 芬 挺 秀 ， 华 夏 增辉 。 我 们 相信 ， 在 严谨 、 勤 奋 、 求 实 、 创 新 的 清华 人 的 努力 下 ， 清 华 
大 学 出 版 社 将 会 不 断 延 续 其 辉煌 的 发 展 历程 ， 发 展 成 为 世界 著名 的 大 学 出 版 社 ， 向 世界 人 民 展 示 其 壮 
丽 雄 伟 的 英姿 ! </p> 


</section> 


HTML 5 为 文档 节 标 记 SECTION 定义 了 一 个 名 为 cite 的 属性 ， 该 属性 用 于 定义 这 
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节 内 容 引用 内 容 的 来 源 。 


在 处 理 文本 内 容 方面 , HTML 5 全 面 继 承 了 XHTML 1.0 结构 语言 的 段落 内 容 特色 以 
及 相关 的 标记 ， 为 开发 者 提供 了 完整 的 文本 处 理 支持 ， 允 许 开 发 者 定义 文本 段落 、 列 表 
等 内 容 类 型 。 


1. 文本 段落 


段落 是 一 种 文章 内 的 内 容 单位 ， 其 通常 为 若干 语句 组 成 的 句 群 ， 并 且 往往 这 些 语句 
具有 一 个 共同 的 意义 。 在 Web 页 中 ， 段 落 元 素 通常 用 于 表现 正文 中 的 内 容 。HTML 5 继 
承 了 XHTML 的 段落 标记 P， 将 文本 或 其 他 数据 以 正文 段落 的 方式 进行 语义 化 显示 。 
段落 标记 是 一 种 基本 的 语义 化 标记 , 在 绝 大 多 数 Web 文档 中 有 重要 的 语义 意义 。 在 
默认 状态 下 ，Web 浏览 器 会 为 段落 标记 前 后 创建 一 些 补 白 并 定义 默认 的 行 高 。 以 下 就 是 
-个 以 段落 标记 定义 的 典型 段落 ， 代 码 如 下 。 


<p>This is some text in a very short paragraph。</P> 


依照 英文 的 行文 习惯 ， 段 落 往往 项 格 书写 。 但 是 针对 中 文书 写 习 惯 ， 如 果 需 要 对 段 
落 进行 特殊 订 制 〈 例 如 段 首 缩 进 2 个 字符 ) ， 可 使 用 CSS 样式 表单 独 定义 段落 的 样式 。 


2， 有 序列 表 


i nd 于 带 有 前 后 顺序 关系 的 项 目 共 同 组 成 的 文本 内 容 集合 ， 在 这 一 集 
， 每 一 个 项 目 被 称 作 列表 项 目 。HIML 5 结构 语言 继承 了 XHTML 的 有 序列 表 标 记 
or a LI， 人 允许 开发 者 结合 这 两 种 标记 定义 有 序列 表 ， 代 码 如 下 。 


<ol> 
<li>Coffee</1i> 
<li>Tea</1i> 
<1i>Milk</Ii> 
</o01> 


在 定义 有 序列 表 时 ， 开 发 者 不 需要 为 该 列表 定义 项 目的 序号 。 在 实际 浏览 中 ，Web 
浏览 器 会 从 1 开始 ， 自 动 为 这 些 列表 项 目 编号 。 如 果 开 发 者 需要 自行 修改 默认 的 序列 ， 
可 使 用 有 序列 表 标 记 OL 的 属性 来 实现 修改 ， 其 属性 如 表 7-3 所 示 。 

5 表 7-3 。 有 序列 表 标记 OL 的 属性 
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作用 
reversed reversed 使 用 此 属性 后 ， 有 序列 表 将 以 倒序 的 方式 排列 元 素 顺 序 
start 守 定义 有 序列 表 顺序 的 起 始 值 
默认 值 ， 以 阿拉 伯 数 字 作为 有 序列 表 的 序号 
以 大 写字 母 定义 有 序列 表 的 序号 
以 小 写字 母 定义 有 序列 表 的 序号 
TD 以 大 写 罗马 数字 定义 有 序列 表 的 序号 
| | 以 小 写 罗马 数字 定义 有 序列 表 的 序号 


虽然 HIML 5 允许 开发 者 直接 以 type 属性 来 定义 有 序列 表 的 序号 类 型 , 但 是 在 实际 
开发 中 ,为 保障 结构 与 表现 有 足够 的 松 耦 合 度 , 在 此 建议 开发 者 使 用 CSS 样式 表 来 实现 
此 定义 功能 。 

3. 无 序列 表 


无 序列 表 是 指 由 若干 列表 项 目 组 成 的 无 序 集合 。 其 与 有 序列 表 类 似 ， 都 使 用 列表 项 
目标 记 LI 来 表示 其 列表 项 目 , 但 其 区 别 在 于 无 序列 表 中 的 项 目 不 存在 前 后 顺序 关系 。 这 
一 特性 使 得 在 实际 开发 中 ， 很 多 开发 者 用 无 序列 表 来 实现 几 个 项 目 内 容 的 并 列 结构 。 

HIML 5 继承 了 XHTML 1.0 结构 语言 中 的 无 序列 表 标 记 UL， 用 于 表现 网 页 文档 中 
的 无 序列 表 。 

无 序列 表 布局 通常 应 用 于 Web 页 的 导航 部 分 , 或 者 需要 呈现 若干 同一 级 别 的 整齐 数 
据 (I 如 新 闻 列 表 、 用 户 名 列表 等 ) ， 在 处 理 单列 的 数据 时 ， 无 序列 表 完 全 可 以 替代 表 
格 ， 使 Web 页 的 结构 更 加 简单 。 下 面 的 代码 就 是 采用 无 序列 表 制 作 的 一 个 页 面 导航 条 ， 
代码 如 下 。 

<ul class="nav list"> 

<1i><a href="index.php" title=" 首 页 "> 首页 </a></1i> 

<li><a href="news .php"” title=" 新 闻 "> 新 闻 </a></1i> 

<li><a href="product .php” title=" 产 品 "> 产 品 </a></1i> 

<1i><a href="customer.php" title=" 客 户 "> 客 户 </a></1i> 

<li><a href="news .php" title=" 新 闻 "> 新 闻 </a></1i> 
</ul> 


与 有 序列 表 类 似 ， 无 序列 表 标 记 UL 也 允许 开发 者 通过 type 属性 来 定义 列表 项 目的 
符号 类 型 ,但 是 在 实际 开发 中 ， 建 议 开发 者 通过 CSS 样式 表 来 实现 此 类 属性 的 定义 ,在 
此 将 不 再 次 述 。 


7.4 ”表格 结构 


表格 是 Web 页 中 的 一 种 特殊 数据 显示 形式 , 其 通常 由 标题 、 表 头 、 正文 和 脚注 组 成 ， 
可 以 显示 分 行 和 分 列 的 大 量 数 据 单元 。 HTML 5 的 表格 与 XHTML 1.0 表格 基本 相同 ， 都 
表格 标记 及 其 多 种 复杂 的 子 集 标记 组 成 时 ， 每 个 标记 都 承载 着 不 同 的 功能 。 


表格 标记 TABLE 是 HTML/XHTML 中 最 复杂 的 结构 标记 之 一 ， 其 支持 大 量 的 子 元 
素 标记 ， 同 时 该 标记 本 身 也 包含 相当 多 的 属性 ， 用 于 定义 内 容 的 显示 方式 以 及 数据 的 显 
示 效 果 等 。 

表格 标记 支持 的 子 元 素 标记 类 型 相当 丰富 ， 包 括 表 格 标题 标记 CAPTION、 表 头 标 
记 THEAD、 脚 注 标 记 TFOOT、 表 体 标记 TBODY 以 及 表格 列 组 标记 COLGROUP、 表 
格 行 标记 TR 等 。 

HTML 5 结构 语言 允许 开发 者 定义 表格 标记 TABLE 的 以 下 几 种 属性 , 如 表 7-4 所 示 。 
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S35 表 7-4 。 表格 标记 TABLE 的 属性 


属 性 属 性 值 


border 整数 像素 值 


cellpadding 


cellspacing 


定义 表格 边框 线 


作 用 


的 宽度 


定义 单元 格 边缘 


定义 单元 格 之 间 
不 显示 外 边框 


与 其 内 容 之 间 的 间距 大 小 


的 间距 大 小 


vold 
above 


显示 上 方 的 外 边 
显示 下 方 的 外 边 


框 
框 


显示 上 方 和 下 方 


的 外 边框 


lhs 显示 左 侧 和 右 侧 的 外 边框 
rhs 显示 左 侧 的 外 边框 


显示 所 有 四 周 的 外 边框 
border 显示 所 有 四 周 的 外 边框 
不 显示 内 框 线 
显示 位 于 行 和 列 组 之 间 的 内 框 线 
显示 行 之 间 的 内 框 线 
| eols ”| 显示 列 之 间 的 内 框 线 
| al | 显示 所 有 内 框 线 
定义 表格 的 摘要 信息 
定义 表格 的 宽度 
定义 表格 相对 于 父 元 素 的 宽度 百分比 
早期 的 Web 页 面 往往 使 用 表格 来 实现 页 面 布 局 , 实际 上 这 是 一 种 错误 的 方法 , 表格 
这 一 内 容 的 本 身 语义 作用 是 显示 基于 行列 的 数据 ， 而 非 作 为 框架 来 定义 元 素 的 位 置 。 


rules 


summary 
width 
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基本 结构 的 表格 是 Web 文档 中 最 常见 的 表格 形式 , 其 由 表格 行 以 及 其 中 的 各 种 单元 
组 成 ， 在 此 类 表格 中 ， 只 允许 开发 者 为 表格 标记 TABLE 内 民 一 种 元 素 ， 即 表格 行 标记 
TR。 在 表格 行 标记 TR 中 ， 人 允许 开发 者 嵌入 两 种 元 素 ， 即 单元 格 标记 TD 以 及 标题 单元 
格 标记 TH。 


1. 表格 的 行 


行 是 表格 中 横向 的 单元 格 排列 集合 。 在 表格 的 行 中 ， 若 干 单元 格 会 按照 指定 的 高 度 
位 置 横向 排列 。 行 以 表格 行 标记 TR 表示 ， 在 表格 中 ， 包 含 单元 格 最 多 的 表格 行 标记 决 
定 表格 的 列 数 。 表 格 行 必须 包含 至 少 一 个 表格 的 单元 格 才 有 意义 。 不 包含 单元 格 的 表格 
行 在 Web 浏览 器 中 将 被 隐藏 。 

HIML 5 虽然 允许 开发 者 通过 align 属性 和 valign 属性 分 别 定义 该 行内 单元 格 的 水 平 
对 齐 方式 和 垂直 对 齐 方式 。 但 通常 情况 下 ,， 绝 大 多 数 开发 者 都 会 使 用 CSS 样式 表 来 操作 
这 些 显示 方式 。 
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在 下 面 的 代码 中 ， 定 义 了 一 个 包含 四 个 单元 格 的 表格 行 ， 代 码 如 下 。 


如 果 表 格 包含 了 多 个 表格 行 且 行 之 间 不 存在 跨行 跨 列 的 情况 ， 则 各 表格 行 之 间 的 单 
元 格 数 都 应 相等 。 


2. 表格 的 单元 格 


单元 格 是 表格 中 最 基本 的 显示 单位 ， 其 存储 了 表格 中 每 一 条 具体 的 数据 。 表 格 支持 
两 种 类 型 的 单元 格 ， 即 标题 单元 格 和 普通 单元 格 。 

标题 单元 格 由 标题 单元 格 标记 TH 表示 ,用 于 定义 标题 类 型 的 单元 格 , 在 Web 浏览 
器 中 , 标题 单元 格 内 的 文本 往往 以 粗 体 显示 , 一些 Web 浏览 器 还 会 将 其 水 平 居中 对 齐 处 
理 ， 普 通 单元 格 由 单元 格 标记 TD 表示 ， 用 于 定义 存储 普通 数据 的 单元 格 。 

在 下 面 的 代码 中 ， 简 单 定义 了 一 个 横向 带 表 头 单元 格 的 数据 行 ， 代 码 如 下 。 


3. 单元 格 的 跨行 


HIML 5 的 表格 允许 单元 格 跨 行 ， 即 某 个 单元 格 纵 跨 若干 相 邻 的 表格 行 。 在 制作 此 
类 表格 单元 格 时 ， 需 要 设置 单元 格 的 纵 跨行 数 。 标 题 单 元 格 标记 TH 和 单元 格 标记 TD 
都 支持 纵 跨 属性 rowspan， 该 属性 的 属性 值 为 大 于 1 的 整数 ， 表 示 单 元 格 纵 跨 的 行 数 。 

在 下 面 的 代码 中 ， 就 定义 了 两 个 表格 行 ， 这 两 个 表格 行 共用 一 个 标题 单元 格 ， 代 码 
如 下 。 


需要 注意 的 是 ， 在 上 面 的 代码 中 ， 第 一 行 的 第 一 个 单元 格 纵 跨 了 两 行 ， 因 此 第 二 行 
只 需要 包含 两 个 单元 格 即 可 。 


4. 单元 格 的 跨 列 


跨 列 的 情况 与 跨行 类 似 ， 是 指 一 个 单元 格 横 跨 若干 相 邻 的 表格 列 。 在 制作 此 类 表格 
单元 格 时 ， 需 要 设置 单元 格 的 横 跨 列 数 。 标 题 单 元 格 标记 TH 和 单元 格 标记 TD 都 支持 
横 跨 属性 colspan， 该 属性 的 属性 值 也 同 为 大 于 1 的 整数 ， 表 示 单 元 格 横 跨 的 列 数 。 

在 下 面 的 代码 中 ， 就 定义 了 三 个 表格 行 ， 其 中 第 一 行 的 数据 横 跨 两 列 ， 作 为 第 二 行 
和 第 三 行 数 据 共同 的 标题 ， 代 码 如 下 。 


完整 的 表格 结构 是 指 包含 标题 、 表 头 、 脚 注 、 主 体 等 4 个 部 分 的 表格 ， 其 意义 在 于 
允许 开发 者 在 表格 内 部 直接 定义 表格 的 标题 , 并 将 表格 内 容 划分 为 表 头 (显示 表格 标题 )、 
脚注 (显示 表格 底部 汇总 部 分 ) 和 表格 主体 〈 显 示 表 格 中 的 一 般 数 据 ) 等 部 分 。 

在 定义 完整 表格 时 ， 开 发 者 还 可 以 定义 表格 的 列 组 ， 即 将 表格 中 的 列 分 为 若干 相 邻 
列 组 成 的 组 ， 以 实现 分 类 定义 。 

HTML 5 继承 了 XHTML 表格 的 所 有 标记 , 允许 开发 者 通过 表格 标题 标记 CAPTION 
定义 表格 的 标题 ， 通 过 表 头 标记 THEAD 定义 表格 的 标题 ， 通 过 脚注 标记 TFOOT 定义 
表格 的 脚注 ， 通 过 表 体 标记 TBODY 定义 表格 中 的 普通 数据 ; 通过 列 组 集合 标记 
COLGROUP 建立 表格 的 列 组 集合 ， 通 过 列 组 标记 COL 定义 列 组 集合 中 的 列 组 。 

需要 注意 的 是 ， 表 格 的 表 头 标记 THEAD、 脚 注 标 记 TFOOT 以 及 表 体 标记 TBODY 
等 三 个 标记 必须 一 并 使 用 ， 且 顺序 必须 为 先 定义 表 头 ， 再 定义 脚注 ， 最 后 定义 表 体 。 

在 下 面 的 代码 中 , 就 应 用 了 除 列 组 外 表格 的 子 元 素 标记 , 以 定义 了 一 个 完整 的 表格 ， 
代码 如 下 。 


<th>Tues .</th> 
<th>Wed.</th> 
<th>Thur .</th> 
<th>Fri.</th> 
<th>sat.</th> 
<th>Sun-</th> 


</tr> 
</thead> 
<tfoot> 
二 
<th colspan="7">Aug. 2013</th> 
</tr> 
</tfoot> 
<tbody> | 
<tr> 章 
<td>29</td> 工 
<td>30</td> 已 
<td>31</td> 
<td>1</td> 结 
<td>2</td> 四 
<td>3</td> 言 
<td>4</td> 
二 二 
< --> 
</tbody> 
</table> 


在 Web 浏览 器 中 , 将 自动 地 把 表格 中 的 各 种 标记 按照 指定 的 规范 进行 排列 , 然后 显 
示 出 来 ， 如 图 7-3 所 示 。 


7.5 HTML 多 媒体 


基本 文本 结构 和 表格 结构 ， 通 常情 况 下 只 能 表现 文本 内 容 。HTML 5 实际 上 是 一 种 
具有 丰富 多 媒体 表现 能 力 的 结构 语言 ， 其 可 以 
与 图 像 、 音 频 、 视 频 等 多 种 多 媒体 元 素 ， 将 其 Calendar 
在 Web 浏览 器 中 显示 出 来 。 Mon. Tues. Wed. Thur. Fri. Sat. Sun. 
3 30 3 -Ee 
5 6 8 0 
JS 
19. 20 2 22 23 3% 25 
26 27 28 29 0 3 
Aug. 2013 


HTML 5 与 XHTML 一 样 通过 图 像 标 记 
IMG 为 Web 页 添加 插图 元 素 ， 将 外 部 的 图 像 
插入 到 当前 Web 页 中 。 图 像 标 记 IMG 的 作用 ATJ 图 7-3 完整 表格 的 结构 效果 
是 在 Web 页 面 区 域 的 指定 位 置 链 接 一 个 外 链 
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图 像 , 以 嵌入 的 方式 显示 。 图 像 标记 IMG 并 不 会 把 外 部 的 图 像 保存 到 当前 的 外 部 网 络 中 ， 
只 会 通过 外 部 的 链接 读 取 这 一 图 像 。 一 旦 外 部 图 像 源 失效 , 则 图 像 标记 IMG 链接 的 图 像 
也 将 随 之 无 法 显示 。 

根据 HTML 的 规范 ， 所 有 的 图 像 标 记 IMG 都 必须 包含 图 像 的 描述 文本 。 在 下 面 的 
代码 中 ， 就 使 用 了 图 像 标记 IMG 来 为 Web 页 添加 了 一 幅 插图 ， 代 码 如 下 。 


<jmg src="http://www.baidu.com/img/bdlogo.gif" alt=" 百 度 一 下 ， 你 就 知道 "” /> 


在 Web 浏览 器 中 ， 即 可 查看 到 加 载 此 图 像 的 Web 页 面 ， 如 图 7-4 所 示 。 

所 有 主流 Web 浏览 器 都 支持 图 像 标记 IMG， 但 是 对 图 像 标记 IMG 链接 的 图 像 格式 
支持 则 有 所 区 别 。 几 乎 所 有 的 Web 浏览 器 都 支 
持 JPEG、GIF、PNG 以 及 BMP 等 四 种 格式 的 00 
图 像 ， 但 是 在 下 6 及 以 下 版 本 的 正 浏览 器 中 ， Bai 络 百度 
对 PNG 仅仅 是 有 限 支持 ， 即 仅 支 持 不 包含 
Alpha 通道 的 16 位 色 PNG 图 像 ,或 包含 Alpha 
通道 的 8 位 色 PNG 图 像 ， 不 支持 包含 Alpha 
通道 的 16 位 色 及 以 上 色 位 的 PNG 图 像 。 

在 IE7 浏览 器 中 ， 虽 然 支持 了 包含 Alpha 通道 的 16 位 色 及 以 上 色 位 的 PNG 图 像 ， 
但 是 使 用 这 些 图 像 会 导致 页 面 加 载 效率 急剧 下 降 。 直 至 IE8 浏览 器 ， 微 软 才 真正 解决 了 
PNG 图 像 的 显示 问题 。 

另外 ， 在 页 面 中 采用 BMP 图 像 会 极 大 地 降低 页 面 打 开 的 效率 ， 导 致 用 户 需要 下 载 
大 量 数据 才能 显示 。 

图 像 标记 IMG 支持 多 种 类 型 的 属性 , 用 于 定义 图 像 的 各 种 参考 信息 、 路 径 等， 如 表 
7-5 所 示 。 

5 表 7-5 ,图像 标记 1MG 的 属性 
属 性 属性 值 作 用 


alt 图 像 的 描述 信息 
| URL | 图像 资源 本 身 的 URL 地 址 ， 当 其 值 为 空 时 阁 像 会 被 显示 为 占 位 符 


发 了 图 7-4 ,图像 在 网 页 中 的 显示 


SIC 

i 像素 值 定义 图 像 的 高 度 

对 定义 图 像 相对 其 父 元 素 的 高 度 

ismap 定义 图 像 由 服务 器 端 映射 的 URL 地 址 


longdesc ”| URL | 定 又 图 像 导入 的 Web 文档 描述 页 面 URL 地 址 
usemap 定义 图 像 由 客户 端 映射 的 URL 地 址 
机 像素 值 定义 图 像 的 宽度 

定义 图 像 相 对 其 父 元 素 的 宽度 


图 像 标记 IMG 还 有 一 种 用 法 , 即 作为 未 来 插入 图 像 的 预先 占 位 ,被 称 作 图 像 占 位 符 。 
当 图 像 标记 IMG 的 src 属性 值 为 空 时 ， 则 其 就 会 被 显示 为 占 位 符 。 


HTML 4.01 和 XHTML 1.0 均 不 支持 直接 在 网 页 文档 中 引用 音频 ， 因 此 在 这 些 结构 


文档 中 , 开发 者 通常 需要 使 用 对 象 标记 OBJECT 来 实现 音频 资源 的 嵌入 .在 HIML 5 中 ， 
直接 提供 了 音频 标记 AUDIO 以 播放 声音 媒体 ， 该 标记 的 出 现 使 得 多 媒体 网 页 的 开发 更 
为 简便 。 

开发 者 可 以 直接 使 用 音频 标记 AUDIO 将 音频 文件 加 载 到 当前 网 页 文档 中 ， 并 定义 
无 支持 文本 内 容 ， 代 码 如 下 。 

<audio src="intro.mp3"> 

您 的 Web 浏览 器 不 支持 HTML 5 结构 语言 ， 请 升级 Web 浏览 器 。 

</audio> 

音频 标记 AUDIO 是 一 种 具有 较 强 自 定义 功能 的 标记 ， 开 发 者 可 以 直接 通过 其 属性 
来 定义 播放 音频 的 方式 ， 如 表 7-6 所 示 。 
32 表 7-6 ,音频 标记 AUDIO 的 属性 


属 性 | 属性 和 什 
定义 该 音频 在 加 载 完 毕 后 直接 播放 
controls 在 网 页 文档 中 显示 控制 该 音频 播放 的 控件 
| loop | 定义 该 音频 循环 播放 
定义 该 音频 播放 时 静音 


定义 该 音频 在 页 面 加 载 时 进行 预 加 载 , 当 定义 了 autoplay 属性 时 本 属 


Nm 


| URL | 定义 音频 的 URL 地 址 


虽然 在 音乐 行业 存在 多 种 常见 的 音频 格式 , 但 目前 被 HTML 5 标准 允许 使 用 的 音频 
主要 包括 三 种 ， 即 Ogg 音频 、MP3 音频 和 Wav 音频 。 常 见 的 各 种 Web 浏览 器 对 这 三 种 
音频 的 支持 是 有 所 区 别 的 ， 如 表 7-7 所 示 。 
3 表 7-7_ 常见 Web 浏览 器 对 HTML5 音频 的 支持 


preload 


Firefox3.S+ Opera 10.5+ Safari 3.0+ 


在 实际 开发 多 媒体 网 页 时 ， 建 议 开 发 者 为 音频 准备 双 版 本 ， 即 Ogg 版 本 和 MP3 版 
本 ， 通 过 JavaScript 判断 Web 浏览 器 然后 再 决定 播放 哪个 版 本 。 


与 音频 类 似 ，HTML 4.01 和 XHTML 1.0 也 不 支持 开发 者 在 网 页 文档 中 直接 嵌入 任 
何 视频 ， 因 此 开发 者 们 通常 需要 使 用 第 三 方 控 件 (诸如 Flash Player、Windows Media 
Player) 来 实现 视频 的 播放 。 

HTML 5 直接 提供 了 视频 标记 VIDEO 来 帮助 开发 者 直接 为 网 页 文档 引入 外 部 视频 ， 
其 使 用 方式 与 音频 标记 AUDIO 十 分 类 似 ， 代 码 如 下 。 

<video src="movie.mp4" controls="controls"> 

</video> 
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视频 标记 VIDEO 也 提供 了 多 种 属性 ， 人 允许 开发 者 直接 定义 视频 的 播放 状态 和 控制 
状态 ， 如 表 7-8 所 示 。 
3 表 7-8_ 视频 标记 VIDEO 的 属性 
性 属性 值 
定义 该 视频 在 加 载 完 毕 后 直接 播放 
在 网 页 文档 中 显示 控制 该 视频 播放 的 控件 
像素 值 定义 该 视频 播放 控件 的 高 度 
loop 


autoplay 


height 


loop 定义 该 视频 循环 播放 
load a 定义 该 视频 在 页 面 加 载 时 进行 预 加 载 , 当 定义 了 autoplay 属性 时 本 属 
Preloa Preloa 性 将 被 忽略 


定义 视频 的 URL 地 址 
定义 该 视频 播放 他 控件 的 高 度 


URL 
像素 值 


视频 标记 VIDEO 支持 源 数据 标记 SOURCE 作为 子 元 素 ， 以 为 该 视频 播放 控件 定义 
-个 列表 ， 以 按照 顺序 播放 视频 列表 ， 该 标记 支持 两 种 属性 ， 如 表 7-9 所 示 。 
表 7-9_, 源 数据 标记 SOURCE 的 属性 
属 值 


定义 源 视频 的 URL 地 址 
type 定义 源 视频 的 MIME 类 型 ， 诸 如 “video/ogg”、“video/mp4”、“video/webm” 等 


例如 ， 通 过 源 数 据 标记 SOURCE 定义 一 个 播放 列表 ， 分 别 播放 moviel.mp4、 
movie2.mp4 等 视频 文件 ， 代 码 如 下 。 
<video width="320" height="240" controls="controls"> 


<source src="moviel .mp4" type="video/mp4"> 
<source src="movie2.mp4" type="video/mp4"> 


</video> 
视频 标记 VIDEO 也 支持 三 种 类 型 的 视频 格式 ， 即 OGG 视频 、MPEG4 视频 以 及 
WebM 视频 等 。 但 是 并 非 所 有 Web 浏览 器 都 支持 这 三 种 视频 格式 ,经 过 测试 ， 常见 的 几 


种 Web 浏览 器 对 三 种 视频 的 支持 性 如 表 7-10 所 示 。 
5 表 7-10 常见 Web 浏览 器 对 HTML 5 视频 的 支持 
浏览 器 


Firefox 4.0+ Opera 10.6+ Safari 3.0+ 


Ogg 视频 
MP4 视频 


在 实际 开发 多 媒体 网 页 时 ， 建 议 开 发 者 为 视频 文件 也 准备 双 版 本 ， 即 Ogg 版 本 和 
MP4 版 本 ， 通 过 JavaScript 判断 Web 浏览 器 然后 再 决定 播放 哪个 版 本 。 


在 制作 诗词 页 面 中 ， 用 户 对 文本 内 容 可 以 进行 一 些 格式 设置 ， 如 标题 、 段 落 等 。 并 


且 ， 用 户 在 录入 文本 时 ， 需 要 插入 特殊 字符 ， 如 图 7-5 所 示 。 


《送别 》 
作者 : 王 维 


下 马 饮 君 酒 ， 问 君 何 所 之 。 
属 言 不 得 塌 ， 归 卧 南山 隆 。 
但 去 真 复 问 ， 和 白云 无 尽 时 


[注解 1: 


加 以 如 酒 : 劝 吾 刀 酒 。 
之 天 


全 二 山中 经 高山 过 < 
[2 
语 你 下 马 喝 一 杯 辩 潭 ,我 想 问 间作 秃 去 哪里 ? 


你 六 宫 场 生活 不 得 记 ， 相 村 5 辽 商 山 的 这 隆 。 
人 只 党 去 吧 我 不 再 问 ， 自 云 无 疤 尽 足以 自 皮 。 


[ 评 折 了 


过 是 一 芷 送 友 人 辣 认 的 省 。 表 而 音 未 责 避 中 泊 


Ps 
人 
后 而 司 的 味 赐 塌 ， 诗 意 慑 浓 ， 项 划 有 心 ， 必 他 无 限 * 


所 图 7-5_, 诗 词 页 

操作 步骤 : 

执行 【文件 ] |[ 新 建 ] 命令 ， 弹 出 【新 建文 
档 】 对 话 框 。 在 该 对 话 框 中 ， 用 户 可 以 选择 
【空白 页 ] 选项 ， 并 在 【 页 面 类 型 】 列表 中 
选择 HTML 选项 ， 单 击 【 创建 ] 按钮 如 图 
7-6 所 示 。 


上 有 图 7-6_, 新 建文 档 


在 【代码 】 视 图 中 ， 将 光标 定位 于 <body> 
标签 之 后 , 并 按 【 回 车 ] 键 。 然后 , 执行 【 插 
入 】1[【 结构】1[【 页 收 】 命令， 如 图 7-7 
所 示 。 

在 弹出 的 【插入 Header 】 对 话 框 中 ， 单 击 
【 确定 】 按钮 。 此 时 ， 在 代码 中 将 插入 
<header></header> 标 签 , 如 图 7-8 所 示 。 


在 了 图 7-8_ 插入 页 眉 标 签 
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再 执行 【插入 】1[【 结构 ] |【 标题 ] |【 标 
题 1 】 命令 ， 并 插入 <h1></h1> 标 签 ， 如 图 
7-9 所 示 。 


在 了 图 7-9 插入 标题 名 


在 <h1> 标 签 中 , 用 户 可 以 输入 诗词 的 名 称 ， 
如 改 送 别 兴 ， 如 图 7-10 所 示 。 


ldoctype hm 
chtmt> 


<head> 
meta charset="utf-8"> 
<titLe; 元 标题 文档 </title> 
</head> 


<body> 
<header><hl> 爷 送别》</hl></header> 
</body> 


hrnt> 


和 图 7-10 ,插入 标题 内 容 


回 在 <h1> 标 签 之 后 ， 再 插入 <h3></h3> 标 题 
标签 ， 并 输入 诗词 的 作者 信息 ， 如 图 7-11 
所 示 。 


cdoctype nenty 

<heml> 

<head> 

可 <meta charoot=rurf-sn> 
:+eue> 无 标题 六 档 </Fttte> 

</head> 


<body> 
<header><hi>< 逆 别 </hi><ha> 作 者 : 王 维 <jha></header> 
/bocy 
/nom 


所 图 7-11 输入 作者 信息 


将 光标 置 于 </h3> 标 签 之 后 , 并 执行 【插入 】 
由 结构 】 |【 文章 】 命令 ， 如 图 7-12 所 示 。 

图 在 弹出 的 [ 插入 Article ] 对 话 框 中 , 单 击 [ 确 
定 ] 按钮 ， 即 可 在 文档 中 添加 该 标签 ， 如 图 
7-13 所 示 。 

图 将 光标 置 于 <article></article> 标 签 中 ， 并 


执行 【格式 ] |【 段落 格式 ] |【 已 编排 格式 】 
命令 ， 如 图 7-14 所 示 。 


图 


和 图 7-12 插入 文章 结构 


pe no 
| <htnl> 
ee 
Demora charsot="urf-a"> 
<title> 元 机 是 文 的 </title> 
/head> 


志 
| 
二 


Bbody> 
是 <header><h1> 世 送别》</hl><h3> 作 者 : 王 维 </ha> 


OD carticle /article> 
和 
[7 | 
| 已 博 ] 
于 = Cw 
sm 


k= 
和 图 7-13 插入 文章 结构 
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7-14 


添加 格式 


在 <pre></pre> 标 签 中 ， 录 入 诗词 的 内 容 ， 
如 图 7-15 所 示 。 

在 </pre> 标 签 后 面 再 执行 【插入 】|【 结 
构 】I【 章 节 】 命 令 ， 并 插入 <section> 
</section> 标 签 ， 如 图 7-16 所 示 。 

在 <section> </section> 标 签 中 ， 再 插入 文 


本 内 容 ， 如 图 7-17 所 示 。 修改 <title></title> 标 签 中 的 网 页 标题 名 称 ， 
如 图 7-19 所 示 。 


点 了 图 7-19 修改 网 页 名 称 
执行 【文件 】 |【 保存 】 命令 ， 将 当前 的 文档 


和 图 7-20 存储 文档 


在 弹出 的 【 另存 为 】 对 话 框 中 ， 用 户 可 以 修 
改 【文件 名 】 为 “sl.html"， 并 单 击 【 保存】 


[了 图 7-17 .添加 文本 内 容 按钮 ， 如 图 7-21 所 示 。 


再 在 </section> 标 签 后 面 添 加 其 他 章节 内 
容 ， 并 输入 文本 ， 如 图 7-18 所 示 。 


加 


人 了 图 7-18 ,添加 章节 内 容 人] 图 7-21 保存 文档 


7.7 课堂 练习 : 班级 管理 1 


班级 管理 制度 页 面 中 ,主要 以 文本 为 主 。 因此 ， 如 果 用 户 要 想 看 起 来 网 页 比较 美观 ， 
需要 对 网 页 中 的 文本 进行 格式 化 设置 ， 如 图 7-22 所 示 。 
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仁和 小 学 班级 管理 制度 


一 、 班 干部 职责 


| 会 议 记录 


级 学 生 开展 各 关 学 习 藻 动 和 : 


7-22 管理 制度 页 面 


操作 步骤 : 

在 文本 编辑 器 中 ， 将 编写 好 的 “管理 制度 ” 
内 容 直 接 复制 到 网 页 编辑 器 中 ， 如 图 7-23 
所 示 。 


| 
仁和 中 学理 级 理 理 制度 
一 、 班 二 部 了 再 


班长， 人 每 月 召开 一 次 班 秀 会 ， 制 订 工 作 计 肖 草 
架 。 馈 后 贡 杰 客人 议 记录 


副 ， 班 长， 协助 班长 做 好 工作 ， 做 好 课堂 考 勘 工作 和 学 校 以 及 字 院 笑 
动 的 得 勒 


学 习 委员 ， 妆 击 入 通 师 生 之 旧 的 坟 息 交流 ， 向 有 关 部 门 反映 尝 生 才 较 
学 的 意见 ， 组 织 天 级 学 生 开展 各 区 学 习 恬 动 和 基本 技能 训 纤 * 


生 笑 委 只， 负责 尝 生 的 后 勤 工 作 ， 协 助 天 主任 处 理 丽 tR 生 活 率 务 ， 灼 
生 情 况 主动 与 相关 老师 联系 。 


劳动 委员 ， 负 责 班 纹 柚 任 区 集 仁 劳动 的 从 排 及 监察 并 及 时 芭 馈 信息 。 
bk EE EE 


7-23 ,粘贴 文本 


选择 全 部 文本 内 容 , 并 执行 【插入 】1[ Div】 
命令 。 即 可 将 文本 包含 在 一 个 <div></div> 
标签 中 ， 如 图 7-24 所 示 。 


Ce Er Er 


和 图 7-24 添加 标签 

选择 标题 名 称 , 并 执行 【格式 儿 段落 格式 】 
1【 标题 1】 命令 , 如 图 7-25 所 示 。 

再 选择 标题 ， 并 执行 【格式 】1[ 对 齐 1[ 右 
中 对 齐 】 命 令 ， 即 可 设置 标题 为 居中 显示 ， 
如 图 7-26 所 示 。 


班 i 负责 班级 全 面 工 作 . 每 月 召开 一 次 更 丢 会 ,制订 工 作 计划 草案 。 做 好 班 役 会 


副 班长 : 协助 班长 做 好 工作 ， 伐 好 课堂 考勤 工作 和 学 校 以 及 学 院 活动 的 考勤 。 
学 习 委员 ， 人 息 交 流 ， 向 有 关 部 门 反映 学 生 对 教学 的 意见 ， 组 织 班 


生活 秀 员 。 负责 学 生 的 后 勤 工 作 ， 协 助 班主 证 处 理 班级 生活 事务 ， 发 生 情 况 主动 与 相关 


注 千 委员 ， 久 责 学 生 的 后 翘 工作 ， 协 财 
生 傅 训 王 动 与 相关 者) 联系 。 


污 动 和 办， 负责 红 责 任 区 集体 革 动 
en 


和 图 7-25 ,设置 标题 


Tm 
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这 全 会议 
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和 图 7-26 ,设置 居中 显示 


选择 标题 以 下 的 内 容 , 并 执行 【插入 】1[ 结 
构 】|[ 文章 ] 命令 ， 即 可 在 文档 中 所 选 内 容 
外 添加 <article></article> 标 签 ， 如 图 7-27 
所 示 。 

回 选择 “一 、 班 干部 职责 ”下 面 的 文本 内 容 ， 
并 执行 【插入 】I【 结构 ] |【 章节 】 命 令 ， 
如 图 7-28 所 示 。 

选择 “一 、 班 干部 职责 ”文本 内 容 ， 并 执 
行 【格式 ] |【 段落 格式 ] | 【 标题 3 】 命 令 ， 
如 图 7-29 所 示 。 
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和 |_ 图 7-27 ,插入 文章 结构 


PT TT TT 
| 仁和 小 学 班级 管理 制度 


Fm :| 


和 图 7-28_。 插 入 章节 标签 


仁和 小 学 班级 管理 制度 ] 
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和 图 7-29 设置 标题 格式 


图 在 分 别 选择 该 节 内 容 中 , 每 段 内 容 中 “冒号 ” 
( : ) 之 前 的 文本 ， 并 在 【 属性 】 检查 器 中 单 
击 【加 粗 】 按钮， 如 图 7-30 所 示 。 


ER 


度 


TPE 


人 图 7-30 文本 加 粗 


oD vy ct ry 


图 同 理 , 分 别 选择 “二 、 学 生 课堂 常规 “三 、 
班级 环境 管理 制度 ”等 内 容 , 分 别 设置 为 章 
节 内 容 ， 并 设置 节 标 题 为 “标题 3”"， 如 图 
7-31 所 示 。 


移师 生 应 忆 约 合用、 去 全 运作 ， 不 损坏 、 到 接 洗 
协 油 和 谐 、 销 洁 美 宙 、 有 条 不 大 


St i a Goi CFECEITE: 


和 图 7-31 ,设置 章节 内 容 

在 【CSS 设计 器 】 面板 中 , 单 击 【 源 】 标 签 
栏 后 面 的 【添加 CSS 源 】 下 拉 按钮 四， 执 
行 【 创建 新 的 CSS 文件 】 命令 ， 如 图 7-32 
所 示 。 


rE TZ 


和 _ 图 7-32 创建 CSS 样式 


在 弹出 的 【 创建 新 的 CSS 文件 】 对话 框 中 ， 
单 击 【 浏 览 ] 按钮 ， 并 在 弹出 的 【 将 样式 表 
文件 另存 为 】 对 话 框 中 ,选择 已 经 创建 的 样 
式 文件 , 单 击 【 保存 ] 按钮, 如 图 7-33 所 示 。 


在 了 图 7-33 链接 外 部 文件 
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在 【选择 器 ] 标签 栏 中 , 单 击 【 添加 选择 器 】 
按钮 国 , 并 输入 p 标签 选择 器 。 然后 , 在 [ 属 
性 】 标 签 栏 中 ， 单 击 【 添 加 CSS 属性 ] 按 
钮 四， 并 输入 属性 与 参数 内 容 ， 如 图 7-34 
所 示 。 


和 图 7-34 ,添加 选择 器 


选择 最 后 落款 内 容 , 并 设置 文本 右 对 齐 方 式 
显示 , 如 选择 “仁和 小 学 一 年 级 二 班 办 委 会 ” 
段落 ， 并 执行 【格式 ] 1 【 对 齐 ] |【 右 对 齐 】 
命令 ， 如 图 7-35 所 示 。 


er eB EE iE 
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和 图 7-35_ ,设置 对 齐 方 式 


Sa 


再 选择 落款 中 其 他 文本 段落 , 并 设置 文本 右 
对 齐 方式 显示 ， 如 图 7-36 所 示 。 


le 


PR; RT 


:6、 术 国文 化 活动 各 概 参 加 校园 六 化 艺术 属 动 ， 和 要 开展 音 项 多 
及 科技 创新 颖 动 、 和 | 


| 
仁和 学 一 年 级 二 班 力 要 会 


一 年 级 二 韭 浊 主任 采 辐 
| We 
oy i rid > 由 划 画 | ¢34 x 269v 
和 图 7-36 ,设置 对 齐 方式 


保存 当前 的 文档 ， 如 执行 【文件 】 1【 保存 】 
命令 , 并 在 弹出 的 【另存 为 】 对 话 框 中 , 修 


改 文件 名 称 , 单 击 【 保存 ] 按钮, 如 图 7-37 
所 示 。 


和 图 7-37 ,保存 文档 


一 、 填 空 题 

1. 传统 的 HTML 和 XHTML 为 保持 向 下 兼 
容 性 ， 定 义 了 和 等 
三 种 文档 模式 。 

2. HTML 5 提供 了 一 系列 语义 化 的 结构 标 
记 , 包括 ns 

3. HTML 5 结构 语言 提供 了 和 


 ， 用 于 帮助 开发 者 通过 JavaScript 脚 
本 语言 快速 在 终端 用 户 的 本 地 计算 机 中 存储 永久 
数据 和 基于 会 话 的 临时 数据 ， 提 高 存储 效率 并 降 


低 信息 泄露 的 风险 。 
4. 在 定义 网 页 中 各 种 路 径 的 基准 路 径 时 ， 
可 使 用 
5. 在 连接 外 部 样式 表 时 ， 可 使 用 。 
6 和 


等 三 种 标记 可 将 表格 分 为 三 个 部 分 。 
二 、 选 择 题 


1. 在 加 载 外 部 脚本 时 ， 需 要 使 用 以 下 哪 种 
标记 ? 


A. 外 链 标 记 LINK 
B. 样式 标记 STYLE 


C. 脚本 标记 SCRIPT 
D. 文档 主体 标记 BODY 
2. 在 构建 文档 主体 结构 时 ， 无 法 使 用 的 标 
记 是 哪 种 ? 
A. 标题 标记 TITLE 
B. 文章 标记 ARTICLE 
C. 页 眉 标 记 HEADER 
D. 页 脚 标记 FOOTER 
3. HTML 5 支持 几 种 文章 标题 ? 
A. 4 种 
B. 5 种 
C. 6 种 
D. 9 种 
4. 完整 的 表格 结构 通常 由 几 个 部 分 组 成 ? 


3 个 
.4 个 


入 认 
D. 6 个 


Nn» 


5. 以 下 哪 种 标记 用 于 构件 表格 行 ? 


A. ID 


了 TH 

C. TBODY 

D. TR 

6. 以 下 哪 种 音频 为 下 9.0 及 更 高 版 本 的 正 
浏览 器 支持 ? 

A. OGG 

B. MP3 

C. MP4 

D. Wav 


三 、 简 答题 


1. 传统 的 HIML、XHTML 与 HIMLS 之 
间 有 什么 区 别 ? 

2. 简 述 HTML 5 的 新 特性 

3. 为 什么 要 使 用 HTML 5 来 开发 网 页 ? 

4. HTML 5 文档 的 主体 结构 都 包含 哪些 
元 素 ? 

5. HTML 5 中 的 有 序列 表 和 无 序列 表 都 有 
哪些 区 别 ? 

6. 都 有 哪些 Web 浏览 器 支持 MP4 视频 ? 
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第 8 草 
使 用 样式 表 


8.1 CSS 技术 概述 


[| (去 5 人 D1 | 


网 站 项 目 中 ， 开 发 者 可 以 使 用 三 种 类 型 的 CSS 样式 表 来 与 网 页 文档 建立 关联 ， 形 成 一 个 
界面 整体 。 


1. 外 部 样式 表 


外 部 样式 表 是 指 在 Web 文档 外 部 书写 的 样式 表 ， 其 需要 将 CSS 样式 表 的 代码 书写 
到 外 部 独立 的 扩展 名 为 CSS 的 样式 表 文 件 中 ,然后 再 通过 HTML 5 结构 语言 提供 的 LINK 
标记 将 样式 表 文件 导入 到 Web 文档 中 生效 。 

在 使 用 外 部 样式 表 时 ， 需 要 首先 编写 CSS 样式 表 文 件 ， 该 文件 分 为 两 个 部 分 ， 一 部 
分 为 编码 声明 ， 另 一 部 分 则 是 样式 代码 。 

其 中 ,编码 声明 的 作用 是 向 Web 浏览 器 提供 该 CSS 样式 表 文 件 所 采用 的 语言 编码 ， 
如 下 所 示 。 


Q@charset 'Code' ; 


在 上 面 的 伪 代 码 中 ， 关 键 字 “Code” 表 示 当 前 CSS 样式 表 文件 的 基本 语言 编码 ， 其 
可 以 是 utf-8、utf-16、gbk、gb2312 等 。 在 此 需要 注意 的 是 ， 编 码 声 明 必 须 书 写 在 CSS 
样式 表 文 档 的 第 一 行 ， 且 之 前 不 能 有 任何 其 他 内 容 ， 否 则 在 一 些 兼容 性 较 差 的 Web 浏览 
器 (例如 Google 的 Chrome 等 ) 将 无 法 正常 识别 该 CSS 文档 。 

选择 CSS 编码 声明 是 非常 重要 的 ， 通 常情 况 下 建议 选择 utf-8 编码 ， 以 提高 在 不 同 
语言 版 本 的 Web 浏览 器 中 样式 代码 的 通用 型 。 另 外 ， 在 此 不 提倡 在 CSS 代码 中 书写 中 
文 (CSS 的 注释 除外 ) ， 在 一 些 非 中 文 版 本 的 Web 浏览 器 中 ， 很 可 能 会 无 法 识别 这 些 中 
文字 符 。 

在 编码 声明 之 后 ， 开 发 者 即 可 直接 书写 CSS 的 注释 和 普通 代码 ， 例 如 ， 在 下 面 的 代 
码 中 ， 就 展示 了 一 个 简单 CSS 文件 的 内 容 。 


@charset "utf-8' 7 


body { 
margin : Opx ; 
padding : Opx ; 


} 


在 完成 CSS 文件 的 编写 之 后 ， 开 发 者 即 可 通过 HTML 5 的 外 链 标 记 LINK， 将 其 与 
网 页 文档 建立 链接 关系 。 

外 部 样式 表 的 优点 在 于 其 将 各 种 CSS 样式 代码 存储 在 外 部 ,与 Web 文档 本 身 隔 离 ， 
因此 可 以 提高 样式 代码 和 结构 代码 的 独立 性 ， 增 强 样式 代码 的 复 用 性 ， 实 现 一 段 样式 代 
码 应 用 于 多 个 Web 页 。 在 复杂 的 大 型 Web 项 目 开 发 中 ， 多 数 样式 代码 都 以 外 部 样式 表 
的 方式 存在 。 

外 部 样式 表 的 执行 优先 级 较 低 ， 会 被 内 部 样式 表 和 内 联 样式 表 覆 盖 。 另 外 ， 由 于 其 
往往 和 多 个 Web 页 关联 , 因此 在 开发 和 调试 时 很 可 能 对 其 做 出 的 任何 修改 都 将 影响 所 有 
相关 的 Web 页 。 


2. 内 部 样式 表 


内 部 样式 表 是 基于 Web 文档 自身 的 一 种 样式 表 存储 形式 ， 其 特点 是 与 HTML 结构 
代码 结合 十 分 紧密 ， 优 先 级 高 于 外 部 样式 表 ， 低 于 内 部 样式 表 。 
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在 使 用 内 部 样式 表 时 ， 需 要 应 用 HIML 5 结构 语言 的 样式 标记 STYLE 建立 一 个 闭 
合 标记 ， 然 后 再 将 CSS 样式 表 代 码 书写 到 该 闭合 标记 内 ， 代 码 如 下 。 


<head> 
<style type="text/css"> 
hl {color:red} 
p {color:blue} 
</style> 
</head> 


相 比 外 部 样式 表 ， 内 部 样式 表 的 优点 是 加 载 效 率 更 高 ， 不 需要 多 占用 一 个 HTTP 连 
接 下 载 线程 ， 其 缺点 是 样式 表 代 码 的 复 用 性 较 差 ， 只 能 应 用 于 当前 的 Web 文档 ， 而 不 能 
为 站 点 内 其 他 Web 文档 引用 。 

如 果 开 发 者 仅仅 需要 编写 单独 的 网 页 文档 ， 则 完全 可 以 使 用 内 部 样式 标记 来 存放 
CSS 样式 表 , 而 如 果 是 为 整个 站 点 的 所 有 Web 页 面 编写 样式 ， 则 推荐 采用 外 部 样式 表 的 
方式 存放 CSS 样式 表 。 


3. 内 联 样式 表 


内 联 样式 也 是 一 种 CSS 样式 的 类 型 ， 其 与 外 部 样式 和 内 部 样式 相 比 ， 优 先 级 更 高 ， 
更 灵活 ， 可 以 和 HIML 5 的 各 种 标记 直接 紧密 结合 ， 为 Web 元 素 直 接 提 供 定 义 CSS 样 
式 的 接口 。 当 然 ， 其 缺点 也 同样 明显 ， 就 是 需要 针对 每 一 个 HIML 5 结构 标记 编写 CSS 
代码 ， 代 码 的 复 用 性 更 差 ， 修 改 和 维护 也 更 为 复杂 。 

在 使 用 内 联 样式 表 时 , 开发 者 需要 采用 HTML 5 结构 标记 的 style 属性 , 该 属性 的 属 
性 值 通常 为 一 个 长 字符 串 ， 可 以 包含 所 有 描述 该 标记 的 CSS 样式 表 代码 。 例 如 ， 定 义 一 
个 文本 段落 的 样式 ， 代 码 如 下 。 


<p style="color : #fff ; font-family : SimSun , Arial ; font-size : 12px; 
line-height : 18px ; text-indent : 2em ;"> 

先帝 创业 未 半 而 中 道 骨 青 , 今 夫 下 三 分 ， 益 州 疲 黄 , 此 诚 危 急 存亡 之 秋 也 。 然 侍卫 之 臣 不 懈 于 内 ， 
忠志 之 士 忘 身 于 外 者 ， 盖 追 先帝 之 殊 遇 ， 欲 报 之 于 陛下 也 。 诚 宜 开 张 圣 听 ， 以 光 先 帝 遗 德 ， 恢 弘 志士 
之 气 ， 不 宜 安 自 菲 薄 ， 引 喻 失 义 ， 以 塞 忠 谏 之 路 也 。 

<p> 


在 实际 开发 中 ， 内 联 样式 由 于 其 复 用 性 差 、 维 护 性 比 之 两 种 样式 表 的 复杂 度 更 高 ， 
故 不 推荐 使 用 。 


CSS 样式 表 的 代码 是 样式 规则 的 集合 ， 其 可 以 包含 一 条 或 多 条 样式 规则 ， 由 这 些 样 
式 规则 来 定义 网 页 文档 中 各 种 元 素 的 显示 效果 。 除 此 之 外 ,CSS 样式 表 还 可 以 包含 注释 ， 
用 于 帮助 开发 者 禁用 某 一 段 代 码 ， 或 者 为 某 些 代码 提供 文字 说 明 。 


1. 基本 语法 
CSS 样式 表 由 若干 样式 规则 组 成 ， 每 一 条 样式 规则 可 以 定义 一 个 网 页 元 素 ， 或 一 系 


列 具备 共同 特性 的 网 页 元 素 的 具体 显示 效果 。 典 型 的 样式 规则 由 选择 器 以 及 一 条 或 多 条 
样式 声明 组 成 ， 如 下 所 示 。 


在 上 面 的 伪 代 码 中 ， 关 键 字 “Selector” 表 示 该 样式 规则 的 选择 规则 ， 其 可 以 是 一 个 
CSS 选择 器 ， 或 若干 CSS 选择 器 组 成 的 选择 方法 。 

在 大 括号 内 的 代码 为 一 些 属性 规则 ， 其 由 若干 条 属性 以 及 对 应 的 属性 值 组 成 ， 每 一 
条 属性 规则 之 间 都 应 以 分 号 “;:” 隔 开 。 其 中 ， 关 键 字 “Property” 表 示 样 式 规则 的 各 条 
属性 ， 关 键 字 “Value” 表 示 各 属性 的 属性 值 。 

例如 ， 定 义 一 级 标题 的 样式 ， 设 置 所 有 网 页 文档 一 级 标题 为 粗 体 ， 代 码 如 下 。 


2. 注释 


与 其 他 编程 语言 类 似 ，CSS 样式 表 也 支持 注释 功能 ， 可 以 帮助 开发 者 禁用 某 一 段 代 
码 ， 或 者 为 某 些 代 码 提 供 文字 说 明 。CSS 提供 两 种 注释 方式 ， 一 种 是 基于 单行 内 容 的 行 
注释 ， 另 一 种 则 是 基于 连续 多 行内 容 的 块 注释 。 

(1) 行 注释 

行 注释 的 作用 是 将 当前 行 的 局 部 内 容 注释 ， 禁 止 Web 浏览 器 对 这 些 内 容 进行 解析 。 
CSS 的 行 注释 需要 使 用 到 双 反 斜 杠 “//” 将 内 容 标 记 起 来 ， 例 如 ， 在 下 面 的 代码 中 ， 第 
一 行内 容 就 已 被 行 注释 ， 如 下 所 示 。 


行 注释 不 仅 可 以 用 于 注释 整 行内 容 ， 也 可 以 临时 注释 某 一 行内 由 某 个 字符 起 始 直至 
行 尾 的 所 有 内 容 。 例 如 ， 在 下 面 的 代码 中 ， 就 将 代码 块 内 第 二 句 CSS 样式 代码 提升 至 前 
一 行 行 尾 并 实现 了 注释 ， 如 下 所 示 。 


行 注释 适合 为 代码 块 提供 语义 类 型 的 说 明 内 容 ， 例 如 注释 某 一 段 CSS 代码 在 整个 
Web 页 中 的 功能 和 作用 等 。 在 使 用 行 注释 时 ， 请 尽量 注意 用 简短 而 精确 的 文本 实现 代码 
的 注释 ， 以 降低 样式 表 文 件 或 网 页 文档 的 文件 尺寸 。 


(2) 块 注释 

块 注释 的 作用 是 提供 一 个 开始 标记 和 结束 标记 ， 并 强制 将 标记 内 包含 的 若干 代码 或 
文本 注释 起 来 ， 禁 止 Web 浏览 器 解析 和 执行 。 块 注释 比 行 注释 更 加 自由 灵活 ， 其 起 始 标 
记 为 连 写 的 反 斜 本 “/” 和 星 号 “* ”， 结 束 标记 为 连 写 的 星 号 “* ”和 反 斜 本 “/”。 

例如 ， 在 下 面 的 代码 中 ， 就 使 用 了 块 注释 来 禁止 Web 浏览 器 解析 一 些 CSS 样式 语 
句 ， 如 下 所 示 。 
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块 注释 既 可 以 注释 若干 行 代码 ， 也 可 以 注释 一 行 代码 中 的 局 部 内 容 ， 实 现行 注释 的 
功能 。 例如， 在 下 面 的 代码 中 ， 就 使 用 了 块 注释 注释 了 局 部 行 的 内 容 ， 如 下 所 示 。 
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块 注释 适合 将 若干 行 代码 快速 禁用 , 也 适合 为 局 部 的 代码 添加 详细 的 多 行 注释 内 容 。 
在 使 用 块 注释 时 , 在 此 同样 推荐 遵循 行 字符 数 80 的 限制 , 以 最 大 限度 保障 各 种 开发 工具 
下 的 浏览 性 能 。 


Css 2.1 样 式 表 主要 注重 的 是 将 原 HTML 4.01 以 及 XHTML 1.0 中 用 于 表现 显示 效果 
的 标记 和 对 应 属性 移植 到 CSS 样式 表 中 , 因此 其 更 注重 基本 的 排版 以 及 网 页 的 布局 效果 ， 
这 也 是 CSS 样式 表 最 基础 的 功能 。 

随 着 CSS 样式 表 的 发 展 ， 如 今 最 新 版 本 的 CSS 3.0 已 经 完全 脱离 了 过 去 旧版 本 样式 
表面 向 网 页 排版 与 布局 的 标 格 ,逐渐 转向 更 丰富 的 Web 表现 能 力 方面 ， 力 争 为 开发 者 提 
供 更 简洁 的 界面 开发 方式 ， 完 善 向 终端 用 户 提供 的 显示 效果 。 相 比 CSS 2.1，CSS 3.0 注 
重 增强 以 下 几 个 方面 。 


1. 选择 器 


CSS 2.1 提供 了 有 限 的 5 种 选择 器 ， 包 括 类 选择 器 、ID 选择 器 、 标 记 选 择 器 、 伪 类 
选择 器 以 及 伪 对 象 选择 器 等 ， 而 CSS 3.0 拓展 了 多 种 新 的 选择 器 ， 包括 扩展 属性 选择 器 、 


扩展 伪 对 象 选择 器 以 及 扩展 伪 类 选择 器 等 ， 帮 助 开发 者 以 更 简洁 的 方式 来 追踪 和 获取 网 
页 元 素 ， 定 义 其 样式 等 。 


2. 布局 效果 


原生 的 CSS 2.1 允许 开发 者 为 网 页 中 的 各 种 块 状元 素 定义 矩形 的 轮廓 ， 设 置 纯色 背 
景 或 原 尺寸 图 像 的 背景 。 在 CSS 3.0 中 ， 首 次 允许 开发 者 为 网 页 中 的 块 状元 素 定 义 圆 角 
矩形 的 轮廓 、 在 轮廓 外 指定 距离 再 次 扩展 一 个 新 的 轮廓 。 

除 此 之 外 ，CSS3.0 还 允许 自行 定义 背景 图 像 的 尺寸 、 对 背景 图 像 进行 裁 切 等 ， 以 及 
定义 轮廓 的 投影 、 以 图 像 作为 边框 等 丰富 的 布局 效果 功能 。 


3. 文本 与 字体 


在 CSS2.1 时 代 ， 开 发 者 必须 使 用 所 谓 “Web 安全 ”字体 ， 即 绝 大 多 数 终端 用 户 都 
会 安装 在 本 地 计算 机 上 的 字体 ， 以 防止 设计 的 网 页 文档 在 用 户 终 端 无 法 正常 显示 。 

CSS 3.0 支持 开发 者 使 用 @font-face 规则 ， 人 允许 开发 者 在 网 站 中 存储 字体 文件 ， 并 通 
过 指定 的 规则 定义 该 字体 在 样式 规则 中 的 变量 名 称 ， 并 将 其 应 用 到 网 页 文档 中 。 另 外 ， 
CSS 3.0 还 允许 开发 者 为 字体 定义 阴影 ， 以 及 强制 换行 、 分 列 等 ， 增 强 文本 内 容 的 表现 
能 力 。 

4. 基本 二 维 / 三 维 支持 


早期 的 CSS 2.0 基于 平面 布局 ， 同 时 仅 限 网 页 元 素 以 固定 的 二 维 方向 显示 。CSS 3.0 
完整 预 置 了 二 维 转换 和 三 维 转换 技术 支持 ， 允 许 开发 者 定义 网 页 元 素 的 二 维 以 及 三 维 旋 
转 、 分 布 等 属性 ， 实 现 网 页 元 素 的 二 维 倾斜 以 及 三 维 转动 等 特效 。 

5. 动画 

传统 的 CSS 样式 表 只 能 定义 静态 内 容 , 所 有 动态 的 网 页 效果 往往 只 能 通过 脚本 语言 
的 计时 函数 来 控制 实现 。 在 CSS 3.0 中 首次 实现 了 动画 API 的 支持 ， 允 许 开发 者 不 借助 
任何 脚本 工具 即 实现 动画 效果 ， 丰 富 网 页 元 素 的 表现 方式 ， 降 低 开发 网 页 程序 的 成 本 。 


8.2 ”选择 Web 元 素 


普通 HIML 5 代码 构成 的 Web 元 素 仅 能 显示 页 面 的 内 容 , 因此 需要 开发 者 通过 CSS 
样式 表 定 义 这 些 Web 元 素 的 显示 效果 ， 增 强 Web 元 素 的 表现 能 力 。 在 定义 Web 元 素 的 
显示 效果 时 ， 首 先 就 需要 建立 CSS 样式 规则 与 Web 元 素 的 关联 ， 这 就 需要 使 用 到 CSS 
的 选择 器 以 及 选择 方法 。 


CSS 的 基本 选择 器 包括 普通 选择 器 和 伪 选 择 器 等 两 大 类 ， 其 中 ， 普 通 选择 器 用 于 实 
现 HIML 标记 的 精确 选择 ， 其 包括 标记 选择 器 、 类 选择 器 、ID 选择 器 以 及 属性 选择 器 
等 ; 伪 选 择 器 用 于 对 这 些 HIML 标记 进行 进一步 的 状态 筛选 ， 其 包括 伪 类 选择 器 和 伪 对 


象 选择 器 等 两 种 。 
1. 标记 选择 器 


标记 选择 器 是 基于 HTML 标记 衍生 而 来 的 CSS 选择 器 ， 其 与 Web 页 中 的 某 一 种 
HTML 标记 紧密 关联 ， 定 义 这 些 标 记 的 CSS 样式 ， 其 使 用 方法 如 下 所 示 。 


在 上 面 的 伪 代 码 中 ，TagName 关键 字 表示 HIML 标记 的 名 称 ，Statements 关键 字 表 
示 定义 的 CSS 代码 。 在 下 面 的 代码 中 ， 就 采用 了 标记 选择 器 来 定义 Web 页 中 HTML 标 
记 以 及 超 链接 标记 A 的 样式 ， 代 码 如 下 。 


2. 类 选择 器 


类 选择 器 是 基于 HTML 标记 的 class 属性 值 产生 的 CSS 选择 器 , 其 与 Web 页 中 所 有 
class 属性 值 相等 的 Web 元 素 紧密 关联 ， 定 义 这 些 标记 的 CSS 样式 。 其 使 用 方法 如 下 
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在 上 面 的 伪 代 码 中 ，ClassName 关键 字 表 示 对 应 HTML 标记 的 class 属性 值 ， 
Statements 关键 字 表示 定义 的 CSS 代码 。 类 选择 器 的 选择 器 之 前 必须 添加 英文 句点 “.” 
以 将 其 和 其 他 选择 器 区 分 开 来 。 带 有 英文 句点 “.” 前缀 也 是 类 选择 器 的 唯一 标识 。 例 如 ， 
在 Web 页 中 存在 以 下 代码 ， 如 下 所 示 。 


在 编写 针对 以 上 代码 的 CSS 样式 时 , 即 可 采用 类 选择 器 的 方式 将 这 些 文本 的 前 景色 
区 分 开 来 ， 代 人 码 如 下 。 


类 选择 器 是 CSS 选择 器 中 使 用 最 灵活 的 选择 器 ， 其 特性 决定 了 样式 代码 和 “HTML 
标记 中 的 class 属性 可 以 通过 复合 的 拆 分 组 合 ， 实 现 CSS 样式 的 碎片 化 ， 以 最 简洁 的 代 
码 实现 复杂 的 样式 。 

例如 ， 以 下 代码 中 每 一 个 标记 仅 包 含 一 个 class 属性 值 ， 代 码 如 下 。 


在 编写 针对 以 上 代码 的 CSS 样式 时 , 只 能 针对 每 一 个 标记 编写 完整 的 针对 该 标记 的 
样式 ， 如 下 所 示 。 


上 面 的 代码 中 ,每 条 CSS 代码 都 必须 包含 两 种 属性 ， 这 种 写法 效率 较 低 ， 同 时 也 比 
较 繁 见 ,在 实际 开发 中 ,完全 可 以 采用 碎片 化 的 方式 编写 HTML 代码 ,为 其 赋予 多 个 class 
属性 ， 然 后 针对 每 一 个 class 属性 编写 更 简洁 的 CSS 代码 ， 如 下 所 示 。 


在 编写 针对 以 上 代码 的 CSS 样式 时 , 则 可 以 只 编写 单条 定义 前 景色 或 背景 色 的 样式 
代码 ， 如 下 所 示 。 


碎片 化 的 CSS 样式 代码 更 加 简洁 ， 其 选择 器 和 代码 含义 的 关联 也 更 加 直接 ， 因 此 在 
开发 过 程 中 ， 推 荐 采用 这 种 方式 以 提高 代码 的 效率 。 


3. ID 选择 器 


ID 选择 器 是 基于 HTML 标记 的 id 属性 值 产生 的 CSS 选择 器 。 在 HTML 标准 中 , 一 
个 Web 页 内 所 有 HTML 标记 的 id 属性 值 是 不 能 重复 的 ， 即 一 个 HTML 标记 的 id 属性 
值 如 果 为 “a”， 则 其 他 任何 HTML 标记 的 id 属性 值 都 不 能 再 是 “a”。 基 于 此 特点 ， 
CSS 的 ID 选择 器 可 以 为 Web 页 中 某 一 个 唯一 的 元 素 定 义 CSS 样式 .ID 选择 器 的 使 用 方 
法 如 下 所 示 。 


在 上 面 的 伪 代 码 中 ，ID 关键 字 表示 对 应 HTML 标记 的 id 属性 ，Statements 关键 字 
表示 定义 的 CSS 语句 。ID 选择 器 的 选择 器 之 前 必须 添加 井 号 “#” 以 将 其 和 其 他 选择 器 
区 分 开 来 。 带 有 井 号 “#” 前 级 也 是 ID 选择 器 的 唯一 标识 。 例 如 ， 在 一 个 Web 页 中 , 包 
含 以 下 模块 ， 代 码 如 下 。 


使 用 CSS 的 ID 选择 器 , 可 以 方便 地 为 这 些 模块 定义 针对 性 的 CSS 样式 , 如 下 所 示 。 


4， 属 性 选择 器 
属性 选择 器 是 指 根据 HTML 标记 的 属性 以 及 属性 值 等 来 对 其 进行 筛选 的 选择 器 。 
CSS 提供 了 4 种 基本 的 属性 选择 器 ， 如 表 8-1 所 示 。 

5 表 8-1 ,CSS 属性 选择 器 

属性 选择 器 使 用 方法 


属性 值 选 择 [Attribute=Value] 


筛选 包含 指定 Attribute 属性 的 HTML 标记 

筛选 包含 指定 Attribute 属性 且 其 属性 值 为 Value 
的 HIML 标记 

筛选 包含 指定 Attribute 属性 且 属 性 值 包含 Value 
单词 的 HTML 标记 

筛选 包含 指定 Attribute 属性 且 属 性 值 以 Value 值 为 
起 始 单词 的 HIML 标记 


属性 单词 检索 [Attribute~=Value] 


需要 注意 的 是 , 在 这 4 种 属性 选择 器 中 , 后 两 种 选择 方式 并 不 能 以 简单 的 模式 匹配 ， 
仅 能 匹配 连接 符 “-” 分 隔 的 单词 ， 例 如 ， 某 个 元 素 的 class 属性 为 “testelement”， 如 果 
用 属性 值 单词 检索 “[class=element]” 或 “[class=testlj” 来 进行 匹配 ， 是 不 能 匹配 成 功 的 。 
当 且 仅 当 该 元 素 的 class 属性 为 “test-element” 时 ， 属 性 值 单 词 检索 ([Attribute~=Value]) 
以 及 属性 值 单词 起 始 筛选 〈[Attributel|=Value]) 才能 够 使 用 。 

CSS2.1 的 属性 选择 这 种 局 限 性 直接 导致 了 其 应 用 十 分 繁 宛 , 开发 者 根本 无 法 真正 地 
对 DOM 节点 的 属性 进行 有 效 的 快速 得 选 匹配 ， 因 此 属性 选择 器 的 应 用 并 不 多 见 。 

5. 伪 类 选择 器 

伪 类 选择 器 是 一 种 典型 的 伪 选 择 器 ， 其 必须 和 标记 选择 器 、 类 选择 器 或 ID 选择 器 
结合 使 用 ， 用 于 定义 这 些 选 择 器 所 指定 HIML 标记 的 一 些 特殊 显示 状态 。 

CSS 提供 五 种 基本 伪 类 选择 器 ， 分 别 对 应 HTML 标记 (主要 是 超 链接 标记 A) 的 五 
种 状态 ， 如 表 8-2 所 示 。 
357 表 8-2 __CSS 伪 类 选择 器 

伪 类 选择 器 


属性 值 单词 起 始 筛选 


定义 标记 在 鼠标 悬 停 状 态 下 的 效果 所 有 显示 对 象 的 HIML 标记 
定义 标记 为 超 链接 状态 下 的 效果 超 链接 标记 A 


定义 标记 在 获取 焦 超 链接 标记 A 
定义 标记 为 超 链接 且 已 被 访问 过 时 的 效果 超 链接 标记 A 
:active 定义 标记 在 选 定 状态 下 的 效果 超 链接 标记 A 
通常 情况 下 ， 伪 类 选择 器 需要 和 其 他 选择 器 配合 使 用 ， 作 为 后 级 追加 到 其 他 选择 器 
之 后 ， 其 使 用 方法 如 下 所 示 。 


Selector:Pseudo-Selector { 


Statements ; 
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在 上 面 的 伪 代 码 中 ， 关 键 字 “Selector” 表 示 普 通 的 选择 器 ， 其 可 以 是 标记 选择 器 、 
类 选择 器 或 ID 选择 器 ; 关键 字 “Pseudo-Selector” 表 示 伪 类 选择 器 ,关键 字 “Statements” 
表示 定义 该 选择 器 的 CSS 语句 。 

所 有 伪 选 择 器 都 必须 添加 英文 冒号 “:” 以 和 其 他 选择 器 分 隔 。 例 如 ， 定 义 一 个 页 面 
中 所 有 的 超 链接 状态 样式 ， 可 以 将 标记 选择 器 与 伪 类 选择 器 配合 使 用 ， 代 码 如 下 。 


a:hover { 

} 

a:link { 

} 
a:visited { 
a:active { 
E 

a:focus { 


在 早期 的 Web 浏览 器 中 , 伪 类 选择 器 仅 能 对 超 链接 标记 A 发 生 作用 , 但 现代 的 Web 
浏览 器 已 经 不 再 对 伪 类 选择 器 进行 限制 ， 因 此 ， 绝 大 多 数 Web 显示 对 象 的 HTML 标记 
都 可 以 使 用 “:hover” 的 伪 类 选择 器 定义 鼠标 悬 停 样式 。 另 外 ， 所 有 正 浏览 器 均 不 支持 
“:focus” 伪 类 选择 器 。 

6.， 伪 对 象 选择 器 

伪 对 象 选择 器 也 是 一 种 伪 选 择 器 ， 其 与 伪 类 选择 器 的 区 别 在 于 ， 伪 类 选择 器 用 于 根 
据 对 象 的 状态 定义 其 样式 效果 ， 而 伪 对 象 选 择 器 则 用 于 根据 对 象 内 部 的 局 部 元 素 定义 其 
样式 效果 。 

CSS 提供 了 6 种 基本 的 伪 对 象 选 择 器 ， 其 作用 如 表 8-3 所 示 。 

S23 表 8-3__CSS 基本 伪 对 象 选择 器 


伪 对 象 选 择 器 
:first-letter 


伪 对 象 选择 器 
定义 文本 的 第 一 个 字符 样式 定义 对 象 之 前 内 容 的 样式 
定义 对 象 之 后 内 容 的 样式 
选择 元 素 的 第 一 个 子 元 素 ” | :lang(language) | 选择 指定 lang 属性 的 子 元 素 


伪 对 象 选择 器 的 使 用 方式 与 伪 类 选择 器 基本 一 致 ， 在 此 将 不 再 獒 述 。 


:first-child 


基本 选择 器 实际 上 是 CSS 3.0 从 原 CSS 2.1 中 继承 而 来 的 选择 器 ， 在 实际 开发 中 ， 
绝 大 多 数 选择 需求 实际 上 已 经 可 以 通过 基本 选择 器 来 解决 。 但 是 为 了 提高 开发 效率 ， 使 
选择 器 的 选择 元 素 功 能 更 加 灵活 ，CSS 3.0 又 扩展 了 一 些 更 丰富 的 选择 功能 。 


1. 扩展 伪 对 象 选择 器 
扩展 伪 对 象 选择 器 是 CSS 3.0 对 伪 对 象 选 择 器 的 拓展 , 其 新 增 了 13 种 全 新 的 伪 对 象 


选择 器 ， 以 方便 开发 者 用 更 精简 的 选择 器 来 选择 复杂 层级 关系 的 网 页 元 素 ， 这 些 伪 对 象 
选择 器 的 示例 及 作用 如 表 8-4 所 示 。 
35 表 8-4 _CSS 扩展 伪 对 象 选择 器 


伪 对 象 示 例 作 用 
:first-of-type Pp:first-of-type 选择 属于 其 父 元 素 的 首 个 <p> 元 素 的 每 个 <p> 元 素 
ast-oftype 选择 局 于 其 父 元 素 的 最 后 也 > 元 素 的 每 个 <p> 元 素 
:only-of-type Pp:only-of-type 选择 属于 其 父 元 素 唯一 的 <p> 元 素 的 每 个 <p> 元 素 
:only-child p:only-child 选择 属于 其 父 元 素 的 唯一 子 元 素 的 每 个 <p> 元 素 
:nth-child(n) p:nth-child(2) 选择 属于 其 父 元 素 的 第 二 个 子 元 素 的 每 个 <p> 元 素 
:nth-last-child(n) p:nth-last-child(2) 同上 ， 从 最 后 一 个 子 元 素 开始 计数 
:nth-of-type(n) p:nth-of-type(2) 选择 属于 其 父 元 素 第 二 个 <p> 元 素 的 每 个 <p> 元 素 
:nth-last-of-type(n) | p:nth-last-of-type(2) 同上 ,但 是 从 最 后 一 个 子 元 素 开始 计数 
:last-child Pp:last-child 选择 属于 其 父 元 素 最 后 一 个 子 元 素 每 个 <p> 元 素 
oot | :oot  ” | 选择 文档 的 根 元 素 
:empty p:empty 选择 没有 子 元 素 的 每 个 <p> 元 素 〈 包 括 文本 节点 ) 
:target 选择 当前 活动 的 加 ews 元 素 
:not(selector) :not(p) 选择 除 <p> 元 素 以 外 其 他 所 有 元 素 


扩展 伪 对 象 选择 器 需要 解决 的 就 是 当 网 页 元 素 以 复杂 的 相互 柑 套 关系 存储 时 如 何 精 
确定 位 这 些 元 素 以 对 其 进行 处 理 的 问题 ， 尤 其 在 一 些 复杂 的 网 页 文档 (如 包含 树 状 菜 单 
时 ) ， 使 用 扩展 伪 对 象 选择 器 可 以 使 CSS 样式 表 代码 更 为 精简 。 

很 多 JavaScript 脚 本 语言 框架 都 通过 扩展 伪 对 象 选择 器 帮助 开发 者 处 理 DOM 元 素 的 
嵌 套 关系 。 了 解 扩展 伪 对 象 选择 器 ， 也 可 以 帮助 开发 者 更 好 地 使 用 这 些 框架 。 

2. 扩展 属性 选择 器 

基本 的 属性 选择 器 在 属性 值 的 检索 方面 具有 诸多 的 限制 ， 这 些 限制 使 得 开发 者 在 使 
用 这 些 选择 器 来 对 属性 值 进 行 检索 时 较 难 使 用 ,为 了 解决 这 一 问题 , CSS 3.0 提供 了 扩展 
属性 选择 ， 帮 助 开 发 者 更 加 自由 地 对 属性 值 进行 检索 匹配 ， 如 表 8-5 所 示 。 
32 表 8-5__CSS 扩展 属性 选择 器 
属性 选择 伪 代 码 作 用 


属性 值 起 始 选择 “| [Attribute^=Value] 筛选 包含 Attribute 属性 且 属 性 值 以 Value 为 起 始 的 标记 
属性 值 末尾 选择 | [Attribute$=Value] 筛选 包含 Attribute 属性 且 属 性 值 以 Value 为 末尾 的 标记 


属性 值 检索 筛选 包含 Attribute 属性 且 属 性 值 包含 Value 的 标记 


相 比 CSS2.1 的 属性 选择 ，CSS3.0 的 属性 选择 在 使 用 上 更 加 简单 和 便捷 ， 
强烈 推荐 开发 者 对 属性 值 进行 匹配 筛选 时 ， 使 用 CSS3 的 属性 选择 。 
3. 扩展 伪 类 选择 器 
基本 的 CSS 选择 器 在 早期 的 Web 浏览 器 (例如 正 8.0 之 前 版 本 的 正 浏览 器 ) 中 只 
针对 超 链 接 进行 鼠标 状态 的 筛选， 随 着 更 新 版 本 的 Web 浏览 器 出 现 ，, 基础 的 伪 类 选择 
器 也 逐渐 能 用 于 网 页 中 的 其 他 元 素 。 
但 是 仅 能 对 鼠标 操作 的 状态 进行 筛选 并 不 能 满足 开发 者 的 复杂 需求 ， 基 于 此 ， 
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CSS 3.0 提供 了 扩展 伪 类 选择 器 ， 允 许 开发 者 对 网 页 中 的 表单 控件 状态 进行 筛选 ， 增 强 
CSS 的 筛选 功能 ， 这 些 伪 类 选择 器 的 使 用 方法 如 表 8-6 所 示 。 

32 表 8-6 _CSS 扩展 伪 类 选择 器 

伪 代 码 
选择 每 个 被 启用 的 <input> 元 素 
选择 每 个 被 禁用 的 <input> 元 素 
选择 每 个 被 选中 的 <input> 元 素 
有 选择 被 用 户 选区 的 元 素 部 分 (多 用 于 文本 区 域 标记 
es TEXTAREA 的 内 容 ) 


:enabled 


:checked 


:Selection 


扩展 伪 类 选择 器 多 用 于 表单 控件 的 筛选 ， 在 开发 复杂 交互 的 网 页 时 ， 使 用 这 些 选 择 
器 大 有 神 荔 。 


选择 方法 是 指 将 多 种 选择 器 结合 使 用 ， 共 同 来 对 HIML 网 页 元 素 进行 选择 ， 以 实现 
精确 的 样式 匹配 。CSS 共 提 供 了 4 种 选择 方法 ， 即 分 组 选择 、 派 生 选 择 、 全 局 匹配 和 追 


1. 分 组 选择 


分 组 选择 方法 是 指 当 多 个 HIML 元 素 需 要 定义 相同 的 CSS 样式 时 ， 对 这 些 CSS 样 
式 进行 合并 而 产生 的 一 种 复合 选择 方法 。 其 特点 在 于 允许 用 一 组 CSS 样式 规则 定义 多 个 
不 同类 型 、 多 种 标记 或 多 个 符合 指定 ID 的 HTML 对 象 。 

在 使 用 分 组 选择 方法 时 ,需要 将 若干 CSS 选择 器 合并 为 一 个 符合 选择 器 ,被 合并 的 
CSS 选择 器 之 间 用 英文 逗号 “,” 隔 开 ， 如 下 所 示 。 

Selectorl ，Selector2 ，Selector3 { 


Statements ; 
由 


在 上 面 的 伪 代 码 中 ，Selectorl1、Selector2 和 Selector3 等 关键 字 用 于 表示 分 组 选择 的 
三 种 选择 器 或 选择 器 与 伪 类 选择 器 的 组 合 ，Statements 关键 字 表 示 描 述 的 CSS 代码 。 例 
如 ， 同 时 定义 Web 页 中 的 6 种 标题 标记 的 CSS 样式 ， 设 置 其 前 景色 为 红色 ， 代 码 如 下 
所 示 。 
ha R22 m3 ha, no hed 
color : #f00 ; 
| 


上 面 的 代码 中 ，CSS 复合 选择 器 由 6 种 标记 选择 器 组 成 ， 每 个 标记 选择 器 之 间 都 使 
用 了 逗号 “,” 作 为 分 隔 符 。 在 将 这 段 CSS 代码 添加 到 Web 页 之 后 ， 所 有 一 级 标题 标记 
Hl、 二 级 标题 标记 H2、 三 级 标题 标记 H3、 四 级 标题 标记 H4、 五 级 标题 标记 H5 和 六 级 
标题 标记 H6 都 将 被 应 用 该 样式 。 


2. 派生 选择 


派生 选择 方法 是 一 种 依照 HTML 元 素 的 翌 套 关系 来 定义 的 选择 方法 , 其 特点 是 可 以 
精确 地 定义 指定 位 置 HTML 元 素 的 CSS 样式 。 在 使 用 派生 选择 方法 时 ， 需 要 了 解 被 定 
义 的 HIML 元 素 的 精确 嵌 套 结构 , 通过 XHTML 元 素 的 嵌 套 结构 来 决定 派生 选择 的 选择 
器 序列 ， 其 使 用 方法 如 下 所 示 。 


在 上 面 的 伪 代 码 中 ，Selector1、Selector2 和 Selector3 等 关键 字 用 于 表示 派生 选择 的 
三 种 选择 器 或 选择 器 与 伪 类 选择 器 的 组 合 ，Statements 关键 字 表 示 描 述 的 CSS 代码 。 如 
果 确 定 三 种 选择 器 或 选择 器 与 伪 类 选择 器 的 组 合 嵌 套 结构 为 Selectorl 包含 Selector2， 
Selector2 包含 Selector3， 则 这 种 派生 的 关系 即 被 Web 浏览 器 判定 为 有 效 。 

例如 ， 在 下 面 的 代码 中 ， 存 在 两 个 超 链接 标记 A， 其 分 别 嵌 套 于 不 同 的 HTML 结构 
中 ， 如 下 所 示 。 


在 上 面 的 代码 中 包含 了 两 个 不 同 的 超 链接 标记 A， 这 两 个 超 链接 标记 A 分 别 被 嵌 套 
于 不 同 的 无 序列 表 标记 UL 中 。 如 果 直 接 使 用 标记 选择 器 定义 其 样式 ， 则 两 个 超 链接 标 
记 A 都 将 被 应 用 样式 ， 如 需要 分 别 定义 这 两 个 超 链接 标记 A 的 样式 , 就 必须 使 用 派生 选 
择 器 ， 如 下 所 示 。 


派生 选择 的 特点 是 根据 HTML 元 素 所 在 Web 页 的 代码 结构 ， 依 次 排列 其 父 元 素 对 
应 的 选择 器 ， 每 个 选择 器 之 间 以 空格 隔 开 。 使 用 派生 选择 ， 可 以 方便 地 定义 位 于 不 同位 
置 的 Web 元 素 的 样式 。 


3. 全 局 匹配 


全 局 匹配 是 指 在 CSS 选择 方法 中 ， 使 用 全 局 匹配 符号 “* ”来 匹配 指定 层级 下 的 任 
意 HTML 标记 ， 包 括 这 些 HTML 标记 的 子 标记 等 。 全 局 匹配 可 以 快速 地 将 某 个 层级 下 
所 有 的 HTML 标记 迅速 筛选 出 来 ， 然 后 再 供 开 发 者 为 其 定义 统一 的 样式 。 

例如 ， 需 要 匹配 整个 Web 文档 中 的 所 有 标记 ,设置 其 最 小 高 度 为 0， 开发 者 可 以 直 
接 为 全 局 匹配 符号 “*” 定 义 CSS 样式 ， 代 码 如 下 。 


在 将 上 面 的 代码 添加 到 CSS 样式 表 后 ， 开 发 者 即 可 定义 整个 Web 文档 内 所 有 的 
HTML 标记 的 最 小 高 度 。 

全 局 匹配 的 优点 在 于 其 使 用 简单 ， 只 需 很 少 的 代码 即 可 定义 大 量 Web 元 素 的 样式 ， 
其 缺点 也 同样 突出 ， 由 于 其 一 次 性 操作 的 Web 元 素 较 多 ， 因 此 可 能 会 降低 整个 页 面 的 泻 
染 速 度 。 同 时 ， 对 整个 页 面 中 所 有 Web 元 素 统一 定义 样式 的 意义 往往 也 并 不 大 (全 局 演 
染 灰 度 除 外 ) 。 因 此 ， 多 数 开 发 者 往往 将 其 余 派生 选择 方法 结合 使 用 ， 对 局 部 的 Web 元 
素 进行 订 制 ， 在 开发 效率 和 泻 染 速度 之 间 取 得 一 个 平衡 。 

例如 ，Web 文档 中 存在 一 个 定义 列表 UL， 该 列表 中 存放 有 若干 定义 词 条 DT 和 定 
义 解 释 DD， 代 码 如 下 。 


如 果 开 发 者 需要 设置 所 有 定义 词 条 DT 和 定义 解释 DD 的 样式 ， 即 可 通过 全 局 匹配 
符号 “* ”与 派生 选择 方法 结合 使 用 ， 代 码 如 下 。 


4. 追溯 选择 


追溯 选择 方法 是 CSS 3.0 新 增 的 选择 方法 ， 其 允许 开发 者 使 用 追溯 的 方式 对 标记 进 
行 筛选 ， 其 使 用 方法 如 下 所 示 。 


在 上 面 的 伪 代 码 中 ，Selectorl 关键 字 表示 位 于 某 个 父 元 素 下 的 前 位 元 素 ;， Selectora2 
关键 字 表示 位 于 同一 父 元 素 下 的 后 位 元 素 , 追溯 选择 方法 的 作用 就 是 在 同一 个 父 元 素 下 ， 
判断 当 Selector2 元 素 之 前 包含 Selectorl 元 素 ， 即 判断 该 筛选 有 效 。 


8.3 ”属性 和 属性 值 


CSS 的 属性 和 属性 值 直接 用 于 定义 指定 选择 规则 的 样式 ， 以 规定 网 页 元 素 的 显示 方 
式 。 正 是 由 属性 和 属性 值 ， 共 同 构成 了 CSS 样式 表 的 属性 规则 。 


属性 规则 包括 属性 以 及 属性 值 等 两 个 部 分 。 在 CSS 样式 表 中 , 所 有 属性 都 是 由 W3C 
预 署 好 的 一 些 关键 词 ， 其 通常 会 与 制定 的 HIML 5 结构 标记 相关 联 ， 以 定义 这 些 HIML 5 
结构 某 一 方面 的 样式 。 

属性 值 是 对 属性 的 描述 和 定义 ， 其 内 容 和 格式 与 属性 的 类 型 息息相关 。CSS 属性 和 
CSS 属性 值 以 冒号 “:” 隐 开 。 单 句 的 CSS 语句 写法 如 下 所 示 。 


Property : Value ; 


在 上 面 的 伪 代 码 中 ，Property 关键 字 表 示 CSS 的 属性 ，Value 关键 字 则 表示 对 应 属 
性 的 属性 值 。 一 些 特殊 的 CSS 属性 往往 可 以 包含 多 个 CSS 属性 值 ,此 时 , 这 些 属性 值 通 
常 以 空格 隔 开 ， 如 下 所 示 。 


Property : Valuel Value2 Value3 ; 


在 上 面 的 伪 代 码 中 ，Property 关键 字 表 示 CSS 的 属性 ，Valuel、Value2 和 Value3 等 
关键 字 表示 该 属性 的 多 个 属性 值 。 

当 一 个 CSS 选择 器 或 选择 器 的 组 合 只 对 应 一 条 CSS 属性 时 ， 末 尾 的 英文 分 号 “;” 
可 以 被 省 略 掉 。 而 如 果 该 CSS 选择 器 或 选择 器 的 组 合 对 应 多 条 CSS 属性 时 ， 则 除了 最 后 
一 条 外 ， 其 他 的 CSS 属性 与 属性 值 语句 末尾 的 英文 分 号 “:” 都 不 可 省 略 ， 如 下 所 示 。 


Property1l : Valuel ; 
Property2 : Value2 ; 


Property3 : Value3 

在 上 面 的 伪 代 码 中 ，Propertyl1、Property2 和 Property3 等 关键 字 表 示 三 个 CSS 属性 ， 
Valuel、Value2 和 Value3 等 关键 字 表示 之 前 三 个 CSS 属性 对 应 的 属性 值 。 

例如 ， 定 义 一 个 Web 元 素 的 文本 前 景色 为 红色 ， 其 属性 为 color， 属 性 值 可 为 red， 
代码 如 下 所 示 。 


color : red ; 


如 果 需 要 定义 某 个 Web 元 素 的 边框 线 为 黑色 一 像素 实 线 , 则 可 以 使 用 多 个 属性 值 的 
方式 定义 ， 如 下 所 示 。 


震 % 小 


淋 凌 养 斑 党 
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border : lpx solid #000 ; 


而 在 定义 某 个 Web 元 素 的 文本 前 景色 为 红色 的 同时 定义 其 背景 色 为 黑色 , 代码 如 下 
所 示 。 


color : red 7 


background-color : black ; 


属性 值 定义 了 CSS 规则 的 具体 效果 程度 ， 例 如 HTML 元 素 各 种 属性 的 具体 尺寸 、 


颜色 、 显 示 方 式 等， 都 属于 属性 值 定义 的 范畴 。 通常 来 讲 ，CSS 的 基本 属性 值 分 为 几 种 ， 
包括 颜色 值 、 长 度 值 、URL， 以 及 英文 关键 字 等 。 
1. 颜色 值 


频 色 值 通 常用 于 描述 各 种 XHTML 对 象 的 文本 前 景色 和 背景 色 ，CSS 支持 四 种 表示 
颜色 的 方式 ， 即 十 六 进 制 数字 、 颜 色 英文 名 称 、 百 分 比 数字 函数 和 十 进 制 数字 函数 等 。 

(1) 十 六 进 制 数字 值 

上 六 进 制 数字 取 色 法 是 在 网 页 中 最 常用 的 取 色 方法 ， 其 格式 如 下 所 示 。 


Color:#RRGGBB; 


RR、GG 和 BB 都 是 两 位 的 十 六 进 制 数字 。RR 代表 对 象 颜色 中 红色 的 深度 ，GG 代 
表 对 象 颜色 中 绿色 的 深度 ， 而 BB 则 代表 对 象 颜色 中 蓝 色 的 深度 。 通 过 描述 这 3 种 颜色 
(3 原色 ) ， 即 可 组 合 出 目前 可 在 显示 器 中 显示 的 所 有 1600 多 万 种 颜色 。 例 如 ， 白 色 即 
“#ffffff”， 红 色 即 “#ff0000”， 黑 色 即 “#000000”。 

当 表示 每 种 原色 的 两 位 十 六 进 制 数字 相同 时 ， 可 将 其 缩写 为 一 位 。 例 如 ， 颜 色 
“#ff6677” 可 缩写 为 “#H67”。 

(2) 英文 名 称 单词 值 

颜色 的 英文 名 称 也 是 一 种 较为 直观 的 颜色 表示 方法 ， 通 常情 况 下 ， 开 发 者 可 以 使 用 
17 种 颜色 名 称 来 表示 各 种 基本 的 颜色 ， 如 表 8-7 所 示 。 
5 表 8-7_ ,常用 颜色 及 其 英文 名 称 和 十 六 进 制 值 
十 六 进 制 值 英文 名 称 颜色 名 十 六 进 制 什 


#ff0000 red 黄色 #ffff00 
人 


深 绿 #008000 green 远 青 #008080 
navy 深 紫 #800080 
transparent 


深蓝 #000080 
除 以 上 17 种 颜色 外 , 微软 公司 的 正 系列 Web 浏览 器 还 另外 支持 对 140 余 种 颜色 以 


英文 名 称 


英文 名 称 的 方式 表示 。 在 使 用 颜色 的 英文 名 称 来 表述 颜色 时 需要 注意 , 不 同 的 Web 浏览 
器 在 识别 这 些 名 称 时 , 解析 的 结果 可 能 有 所 区 别 。 一些 早期 的 Web 浏览 器 会 以 不 正确 的 
方式 解析 颜色 ， 因 此 ， 在 此 并 不 推荐 大 范围 使 用 英文 名 称 表示 颜色 。 

(3) 百分比 函数 

百分比 数字 函数 也 是 一 种 常见 的 颜色 表示 方式 。 其 原理 是 将 色彩 的 深度 以 百分比 的 
形式 来 表示 ， 其 使 用 方法 如 下 所 示 。 


Color:rgb(100%,100%,100%); 


在 百分比 颜色 表示 方式 中 ， 第 一 个 值 为 红色 ， 第 二 个 值 为 绿色 ， 第 三 个 值 为 蓝 色 。 
色彩 的 百分比 越 大 ， 则 其 色彩 深度 越 大 。 

(4) 十 进 制 数字 函数 

十 进 制 数字 表示 法 其 原理 和 百分比 表示 法 相同 ， 都 是 通过 描述 数字 的 大 小 来 控制 颜 
色 的 深度 。 其 书写 格式 也 与 百分比 表示 法 类 似 ， 如 下 所 示 。 


coLorsrgb(25572557250) 


上 进 制 数字 表示 法 表示 颜色 的 数值 范围 为 0~~255， 数 值 越 大 ， 则 该 颜色 的 色 深 也 就 
越 大 。 


2. 长 度 值 


长 度 值 主要 用 于 衡量 网 页 元 素 样式 中 的 各 种 与 距离 、 空 间 相关 的 属性 ， 定 义 这 些 属 
性 中 的 距离 因素 。CSS 的 长 度 值 主要 包括 两 种 ， 即 绝对 长 度 值 和 相对 长 度 值 。 

(1) 绝对 长 度 值 

绝对 长 度 值 是 指 在 设计 中 使 用 的 衡量 物体 在 实际 环境 中 长 度 、 面 积 、 大 小 等 的 单位 。 
通常 情况 下 其 很 少 在 网 页 中 使 用 ， 常 用 于 实体 印刷 中 。 但 是 在 一 些 特殊 的 场合 ， 使 用 绝 
对 单位 是 非常 必要 的 。CSS 支持 以 下 几 种 绝对 长 度 单 位 ， 如 表 8-8 所 示 。 
332 表 8-8__CSS 绝对 长 度 单位 


英文 名 称 中 文 名 称 

i 在 设计 中 使 用 最 广泛 的 长 度 单位 
| ”厘米 ”| 在 生活 中 使 用 最 广泛 的 长 度 单位 
在 研究 领域 使 用 较 广泛 的 长 度 单位 
在 印刷 领域 使 用 非常 广泛 ， 也 称 点 ， 其 在 CSS 中 的 应 用 主要 用 
于 表示 字体 的 大 小 
在 印刷 领域 经 常 使 用 ，1 派 卡 等 于 12 磅 ， 所 以 也 称 12 点 活字 


(2) 相对 长 度 值 

相对 长 度 值 与 绝对 长 度 值 相 比 ， 其 在 Web 开发 中 应 用 更 加 广泛 ， 会 受到 Web 应 用 
输出 的 显示 屏幕 影响 ， 包 括 屏幕 分 辨 率 、 屏 幕 可 视 区 域 、 浏 览 器 设置 和 相关 元 素 的 大 小 
等 多 种 因素 。CSS 支持 以 下 几 种 相对 长 度 单位 ， 如 下 所 示 。 

DD em 

em 单位 表示 字体 对 象 的 行 高 。 其 能 够 根据 字体 的 大 小 属性 值 来 确定 大 小 。 例 如 ， 当 
设置 字体 为 12px 时 ，1 个 em 就 等 于 12px。 如 果 网 页 中 未 确定 字体 大 小 值 ， 则 em 的 单 


位 高 度 根据 浏览 器 默认 的 字体 大 小 来 确定 。 在 正 浏览 器 中 , 默认 正文 文本 的 字体 高 度 为 
16px。 

er 

ex 是 衡量 小 写字 母 在 网 页 中 的 大 小 的 单位 。 其 通常 根据 所 使 用 的 字体 中 小 写字 母 x 
的 高 度 作 为 参考 ， 在 实际 使 用 中 ， 浏 览 器 将 通过 em 的 值 除 以 2 得 到 ex 值 。 

D px 

px， 就 是 像素 ， 显 示 器 屏幕 中 最 小 的 基本 单位 。px 是 网 页 和 平面 设计 中 最 常见 的 单 
位 ， 其 取 值 是 根据 显示 器 的 分 辩 率 来 设计 的 。 

口 百分比 

百分比 也 是 一 个 相对 单位 值 ， 其 必须 通过 另 一 个 值 来 计算 ， 通 常用 于 衡量 对 象 的 长 
度 或 宽度 。 在 网 页 中 ， 使 用 百分比 的 对 象 通常 取 值 的 对 象 是 其 父 对 象 。 


3. URL 值 


URL (Uniform Resource Locator， 统 一 资源 定位 符 ) 用 于 描述 Intemet 上 网 页 文档 和 
其 他 资源 的 物理 地 址 ， 其 本 身 有 两 种 形式 ， 即 绝对 URL 和 相对 URL 等 。 
(1) 绝对 URL 
绝对 URL 是 URL 的 完整 书写 形式 ， 即 包含 完整 地 协议 、 授 权 、 服 务 器 、 端 口 、 路 
文件 名 、 参 数 、 值 以 及 锚 记 的 URL 地 址 ， 其 书写 方式 如 下 所 示 。 
Protocol://Authorization@Server:Port/Path/Document?Argument=Value#Anchor 
在 上 面 的 伪 代 码 中 表示 了 完整 的 绝对 URL 书写 方式 ， 其 中 各 关键 字 的 意义 如 表 8-9 
所 示 。 
3 表 8-9 ,绝对 URL 的 构成 


孔 


关 键 字 作 用 
URL 的 协议 ， 常 用 的 协议 诸如 HTTP、HTTPs、FTP、File 等 ， 分 别 用 于 超 文 本 
Protocol 传输 、 安 全 的 超 文本 传输 、 文 件 传输 以 及 本 地 文件 引用 等 。 在 网 站 项 目 中 最 常 


用 的 是 HTTP 以 及 HTTPs 等 

URL 访问 的 鉴 权 ， 该 鉴 权 在 FTP 等 需要 鉴 权 的 协议 中 比较 常用 ， 书 写 方式 为 

UserPassword， 即 用 户 名 +“:”+ 密 码 

rv 服务 器 的 地 址 ， 其 可 以 是 服务 器 的 下 地址， 也 可 以 是 服务 器 的 域 ， 包 括 局 域 或 
广 域 等 ， 也 可 以 是 广 域 中 的 子 域 

端口 号 。TCP/IP 协议 规定 其 协议 下 所 有 主机 都 包含 65535 个 端口 ， 其 端口 号 为 

“0-65534”。 一 些 特殊 端口 通常 会 被 指定 的 协议 默认 占用 ,例如 FTP 协议 默认 占 

用 21 号 端口 HTTP 协议 默认 占用 80 端口 等 。 如 果 协 议 使 用 了 默认 端口 ， 则 无 

须 在 URL 中 书写 端口 号 ， 否 则 必须 书写 端口 号 


Authorization 


Port 


Path 表示 文档 在 服务 器 共享 目录 下 的 存储 路 径 


Document 文档 的 名 称 和 扩展 名 

Argument 查询 文档 内 容 时 执行 动态 语句 的 参数 
Value 查询 文档 内 容 时 执行 动态 语句 的 参数 值 
Anchor 文档 内 的 锚 记 


任何 在 互联 网 上 发 布 的 文档 ， 其 绝对 URL 都 是 在 整个 互联 网 上 唯一 的 。 绝 对 URL 
表示 不 依赖 任何 存储 关系 的 调用 文档 的 方法 。 在 引用 非 本 地 或 非 当 前 主机 的 内 容 时 必须 


使 用 绝对 URL。 

(2) 相对 URL 

相对 URL 是 绝对 URL 的 简化 形式 ， 用 于 表现 在 指定 文件 层级 关系 内 的 文件 位 置 ， 
其 通常 只 包含 路 径 和 文件 名 等 组 成 结构 。 相 对 URL 的 特点 是 比较 简短 , 适合 引用 本 地 或 
当前 主机 内 部 的 内 容 。 


4. 整数 值 
一 些 特殊 的 属性 允许 开发 者 以 无 单位 的 自然 数 定义 属性 的 变化 幅度 ， 例 如 之 后 要 介 


绍 到 的 font-weight 属性 等 。 需 要 注意 的 是 ， 自 然 数 的 属性 值 不 应 包含 任何 单位 ， 绝 大 多 
数 使 用 长 度 值 作为 属性 值 的 属性 都 允许 使 用 不 带 单位 的 数字 “0”。 


5. 字符 串 值 
字符 串 属性 值 的 作用 是 用 来 形容 一 些 特殊 的 数据 内 容 ， 其 内 容 由 开发 者 自行 编写 和 


定义 。 在 使 用 字符 串 属 性 值 时 ， 需 要 在 值 的 两 侧 添加 引号 “""”。 最 常见 的 字符 串 值 就 
是 文本 内 容 的 字体 ， 例 如 ， 定 义 文本 以 宋体 的 方式 显示 ， 代 码 如 下 。 

font-family : "Simsun' ; 

6. 英文 关键 字 

除 以 上 几 种 属性 值 外 ，CSS 还 支持 采用 英文 单词 关键 字 作 为 属性 值 ， 定 义 一 些 必须 
以 文字 描述 的 CSS 属性 , 这 些 属性 值 通常 与 CSS 属性 紧密 相关 , 被 限定 于 指定 属性 内 应 


用 。 例如， 定义 网 页 元 素 背 景 的 重复 性 ， 就 需要 使 用 到 4 个 关键 字 ， 即 repeat、repeat-x、 
repeat-y 以 及 no-repeat 等 ， 如 下 所 示 。 


background-repeat : no-repeat ; 


8.4 样式 表 的 优先 级 


优先 级 是 计算 机 开发 的 一 个 术语 , 其 规定 了 计算 机 程序 处 理 数据 时 的 处 理 顺 序 。CSS 
样式 表 是 一 种 行 解析 的 编程 语言 Web 浏览 器 在 解析 CSS 样式 表 时 ， 以 自 上 而 下 的 顺序 
逐 行 判读 ， 根 据 行 的 顺序 将 CSS 样式 表 所 描述 的 效果 应 用 到 Web 页 的 HTML 对 象 上 。 


在 默认 的 状态 下 ，CSS 样式 表 越 新 〈 在 代码 文件 中 处 于 较为 靠 后 的 位 置 ) ， 则 其 优 
先 级 越 高 ， 反 之 ， 则 优先 级 较 低 。 这 种 优先 级 排序 被 称 为 默认 优先 级 。 除 此 之 外 ， 不 同 
类 型 的 选择 器 其 在 Web 浏览 器 中 的 处 理 优先 级 是 有 所 区 别 的 .Web 浏览 器 在 解析 这 些 选 
择 器 时 ， 还 会 依照 选择 器 的 覆盖 选择 范围 对 样式 代码 的 优先 级 进行 修正 。 通 常情 况 下 ， 
选择 器 覆盖 选择 范围 越 广 ， 则 其 优先 级 越 低 。 

在 4 种 基本 的 真 选择 器 中 ,根据 其 覆盖 HIML 元 素 的 范围 ， 可 以 确定 一 个 基本 的 优 
先 级 公式 ， 如 下 所 示 。 


如 果 一 个 HTML 标记 拥有 多 个 class 属性 值 ， 符 合 多 个 类 选择 器 的 CSS 样式 匹配 ， 
则 Web 浏览 器 将 以 加 载 的 最 后 一 个 类 选择 器 样式 为 准 。 

例如 ， 在 下 面 的 代码 中 ，HTML 的 超 链接 标记 A 既 包 含有 id 属性 ， 同 时 也 包含 多 
个 class 属性 ， 代 码 如 下 。 


针对 上 面 的 代码 ， 可 以 编写 四 条 CSS 样式 规则 ， 代 码 如 下 。 


在 上 面 的 代码 中 ，ID 选择 器 “#baidu_link” 的 样式 规则 优先 级 最 高 ， 因 此 无 论 如 何 
调整 这 四 条 CSS 样式 规则 的 顺序 ， 超 链接 标记 A 最 终 显示 的 都 是 黑色 (#000) 。 如 果 删 
除了 ID 选择 器 “#baidu_link” 的 样式 规则 ， 则 类 选择 器 “.nav_link” 和 “.hyper_link” 
中 以 最 后 一 条 的 样式 效果 为 准 ， 超 链接 标记 A 默认 显示 为 蓝 色 。 仅 有 当 ID 选择 器 
“#baidu_link”、 类 选择 器 “.nav_link” 和 “.hyper_link” 都 被 删除 的 情况 下 ， 超 链接 A 
才 会 显示 为 红色 。 


与 CSS 的 选择 类 似 ， 属 性 也 同样 具有 优先 级 的 概念 ，Web 浏览 器 在 解析 一 条 CSS 
样式 规则 时 ， 同 样 会 根据 属性 的 顺序 或 提 权 来 决定 优先 级 的 顺序 。 

在 默认 状态 下 ， 在 同一 个 CSS 样式 规则 中 ， 属 性 的 代码 越 新 ， 则 其 优先 级 越 高 ， 反 
之 则 越 低 ， 这 种 优先 级 为 默认 优先 级 。 例 如 ， 在 下 面 的 代码 中 ， 对 文本 前 景色 进行 了 多 
次 描述 ， 代 码 如 下 。 


在 上 面 的 代码 中 ，Web 浏览 器 会 依照 默认 的 优先 级 逐 行 解析 ， 并 将 最 下 方 一 行 的 同 
属性 数据 作为 应 用 到 Web 元 素 中 的 基准 样式 。 如 果 需 要 人 工 对 这 一 优先 级 进行 干预 ,可 
以 使 用 重点 操作 符 “!important” 对 某 一 条 属性 进行 临时 提 权 ， 代 码 如 下 所 示 。 


color : #f00 ; 
color : #0f0!important ; 
color : #00f ; 


在 上 面 的 代码 中 ， 共 计 依 次 书写 了 三 条 属性 和 属性 值 组 成 的 样式 语句 ， 按 照 默认 的 
优先 级 规则 , 真正 应 用 到 Web 元 素 的 样式 应 为 第 三 条 语句 , 但 是 由 于 第 二 条 样式 语句 拥 
有 重点 操作 符 “!important”， 因 此 Web 浏览 器 会 以 这 条 样式 语句 为 最 终 应 用 的 基准 。 

在 使 用 重点 操作 符 “!important” 时 需要 注意 的 是 ， 重 点 操作 符 “!important” 必 须 直 
接 跟 随 属性 值 书写 , 位 于 分 号 “:" 之 前 。 一 个 语句 只 能 添加 一 个 重点 操作 符 “!important”， 
如 若干 属性 都 添加 了 重点 操作 符 “!important”， 则 添加 重点 操作 符 “!important” 的 语句 
之 间 仍 然 以 默认 优先 级 解析 。 

另外 ， 重 点 操作 符 “!important” 属 于 CSS2.1 新 增 的 功能 ， 因 此 早期 的 下 浏览 器 
(Intemet Explorer 6.0 及 之 前 版 本 的 正 浏览 器 ) 不 支持 此 功能 。 


8.5 使 用 CSS 设计 器 


在 之 前 的 小 节 中 ， 已 经 详细 介绍 了 CSS 3.0 的 一 些 基本 使 用 方法 ， 包 括 CSS 的 基本 
语法 、 选 择 器 、 选 择 方法 、 属 性 和 属性 值 等 元 素 的 使 用 等 。 了 解 了 这 些 知 识 之 后 ， 开 发 
者 实际 上 已 经 可 以 直接 编写 CSS 样式 代码 ， 将 其 应 用 到 网 页 文档 中 。 

Dreamweaver CC 的 特色 就 是 为 开发 者 提供 可 视 化 的 方式 来 编辑 网 页 , 因此 针对 CSS 
样式 表 ，Dreamweaver 提供 了 【CSS 设计 器 】 面 板 ， 通 过 可 视 化 的 方式 帮助 开发 者 进行 
网 页 的 设计 。 


【CSS 设计 器 】 面 板 是 Dreamweaver CC 为 fess 


开发 者 提供 的 最 重要 的 可 视 化 交互 工具 之 一 ， | 本 “而 百 百 百 Di 
其 作用 是 帮助 开发 者 快速 编辑 CSS 样式 表 , 并 天 5 
模拟 显示 网 页 元 素 的 布局 效果 。 soe 
在 Dreamweaver 中 执行 【窗口 ]1【CSS 设 te 
计 器 】 命 令 ， 即 可 将 【CSS 设计 器 面板 置 于 | | we 


显示 状态 ， 该 面板 将 显示 网 页 文档 中 所 有 已 定 | 车 
义 的 CSS 样式 表 规则 ， 如 图 8-1 所 示 。 A 


si el © 
1.【CSS 设计 器 】 面 板 界面 RE 


【CSS 设计 器 】 面 板 主要 分 为 四 个 窗 格 区 
块 ， 如 下 所 示 。 和 |_ 图 8-1__CSS 设计 器 面板 
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(1) 源 

【 源 】 窗 格 的 作用 是 显示 当前 网 页 文档 中 所 有 已 经 加 载 或 关联 的 外 部 CSS 样式 表 、 
内 部 CSS 样式 表 ， 同 时 提供 快捷 的 方式 ， 允 许 开 发 者 为 网 页 文档 新 增 样式 表 ， 或 删除 已 
经 关联 的 样式 表 等 。 

(2) @ 媒 体 

HTML 中 的 外 链 标记 LINK 和 样式 标记 STYLE 都 允许 开发 者 定义 media 属性 ,用 于 
决定 样式 表 在 不 同 客户 端 平台 下 的 应 用 状况 (媒体 类 型 》。【@ 媒 体 】 窗 格 的 作用 就 是 
根据 开发 者 在 【 源 】 窗 格 中 选择 的 样式 表 源 文件 或 内 部 样式 表 ， 显 示 这 些 样式 表 所 应 用 
的 媒体 类 型 ， 并 允许 开发 者 在 此 面板 中 更 改 这 些 样 式 表 所 应 用 的 媒体 类 型 。 

(3) 选择 器 

该 窗 格 将 会 根据 开发 者 在 【 源 】 窗 格 中 选择 的 样式 表 源 文件 或 内 部 样式 表 ， 显 示 这 
些 样式 表 中 所 有 的 选择 器 和 选择 方法 。 开 发 者 可 以 在 此 窗 格 中 为 指定 的 样式 表 和 媒体 文 
件 添加 、 编 辑 和 删除 选择 器 规则 和 对 应 的 属性 规则 。 

(4) 属性 

根据 开发 者 在 【选择 器 】 窗 格 中 所 选择 的 选择 器 或 选择 方法 ， 显 示 对 应 的 属性 设置 
以 及 一 些 预览 信息 ， 诸 如 盒 模 型 等 。 开 发 者 可 以 在 此 窗 格 中 编辑 指定 选择 规则 下 的 属性 
以 及 属性 值 。 


2.【CSS 设计 器 】 与 网 页 文档 


【CSS 设计 器 】 是 与 上 下 文 相关 的 。 这 意味 着 ， 对 于 任何 给 定 的 上 下 文 或 选 定 的 页 面 
元 素 ， 用 户 都 可 以 查看 关联 的 选择 器 和 属性 ， 如 图 8-2 所 示 。 


和 图 8-2_。 网 页 元 素 与 CSS 设计 器 


并 且 ， 在 【CSS 设计 器 】 中 选中 某 选 择 器 时 ， 关 联 的 源 和 媒体 查询 将 在 各 自 的 窗 格 
中 高 亮 显示 ， 如 图 8-3 所 示 。 


> 
Ec 


在 【CSS 设计 器 】 面 板 中 ， 用 户 可 以 创建 CSS 文件 、 附 加 CSS 文件 ， 以 及 在 页 面 
中 定义 CSS 样式 等 。 


1. 创建 新 文件 


在 【CSS 设计 器 】 面 板 的 【 源 】 窗 格 中 ， 单 击 【 添 加 CSS 源 】 按 钮 束 ， 然 后 在 弹出 
的 列表 中 ， 执 行 【 创 建新 的 CSS 文件 】 命 令 ， 如 图 8-4 所 示 。 

根据 用 户 执行 的 选项 ， 将 弹出 【创建 新 的 CSS 文件 】 对 话 框 ， 并 且 【 添 加 为 】 默 认 
选择 为 【链接 】 选 项 ， 如 图 8-5 所 示 。 


和 图 8-4 创建 CSS 文件 和 图 8-5 创建 新 的 CSS 文件 


在 该 对 话 框 中 ， 开 发 者 可 以 快速 为 网 页 文档 链接 一 个 外 部 样式 表 ， 也 可 以 将 外 部 样 
式 表 文件 导入 到 当前 网 页 文档 ， 使 之 成 为 内 部 样式 表 ， 其 作用 如 表 8-10 所 示 。 

在 决定 了 CSS 样式 表 的 存放 方式 以 及 所 应 用 的 媒体 查询 条 件 之 后 , 开发 者 即 可 单 击 
【确定 】 按 钮 ， 为 网 页 文档 绑 定 CSS 样式 表 或 将 外 部 的 CSS 样式 表 引 入 到 当前 网 页 文 
档 中 。 


网 
页 
设 
计 
与 
网 
三 

建 
设 
Q 
中 
文 
版 
标 
准 
教 
程 


5 表 8-10 创建 CSS 文件 的 各 种 属性 
属 性 作用 
文件 URL 链接 或 导入 的 外 部 CSS 样式 表 文件 URL 
a 以 链接 的 方式 将 外 部 CSS 样式 表 与 当前 网 页 文档 关联 ， 
| 在 开发 者 选 定 的 位 置 创建 CSS 文件 
i 将 外 部 样式 表 的 所 有 代码 导入 到 当前 网 页 文档 ， 生 成 内 


有 条 件 使 用 可 选 》 


部 样式 表 
显示 或 隐藏 【创建 新 的 CSS 文件 】 高 级 选项 ( 即 样 式 表 
所 应 用 的 条 件 ) 


为 样式 表 添 加 媒体 声明 ， 定 义 其 可 作用 的 设备 类 型 ， 具 
uot 体 类 型 请 参考 之 前 相关 小 节 外 链 标记 LINK 的 media 属性 
页 面 旋转 设置 ， 定 义 禁 止 输出 设备 页 面 可 见 区 域 高 度 大 
ca Jendseape | 于 或 等 于 宽度 〈 即 禁止 坚 屏 显示 ) 
i 允许 输出 设备 中 页 面 可 见 区 域 的 高 度 大 于 或 等 于 宽度 
本 ( 即 允 许 竖 屏 显示 ) 
定义 样式 表 在 指定 最 小 页 面 宽 度 情 况 下 可 用 
max-width 定义 样式 表 在 指定 最 大 页 面 宽 度 情况 下 可 用 
[widh ”一 一 一 一 | 定义 样式 表 在 抽 定 页 宽 度 生 党 下 可 用 
min-height 定义 样式 表 在 指定 最 小 页 面 高 度 情况 下 可 用 
定义 本 式 表 在 指定 节 大 页 而 高 度 傅 况 下 可 用 
height 定义 样式 表 在 指定 页 面 高 度 情况 下 可 用 
定义 样式 表 在 指定 最 小 页 面 分 辩 率 情况 下 可 用 
条 件 ”| max-resolution 定义 样式 表 在 指定 最 大 页 面 分 辨 率 情 况 下 可 用 
定义 样式 表 在 指定 页 面 分 辨 率 情况 下 可 用 
min-device-aspect-ratio 定义 样式 表 在 指定 最 小 设备 显示 屏 宽 高 比 情况 下 可 用 
定义 样式 表 在 指定 最 大 设备 显示 屏 宽 高 比 情况 下 可 用 
device-aspect-ratio 定义 样式 表 在 指定 设备 显示 屏 宽 高 比 情 况 下 可 用 
定义 样式 表 在 指定 最 小 页 面 显示 区 域 宽 高 比 情况 下 可 用 
max-aspect-ratio 定义 样式 表 在 指定 最 大 页 面 显示 区 域 宽 高 比 情 况 下 可 用 
定义 样式 表 在 指定 页 面 显示 区 域 宽 高 比 情况 下 可 用 
min-device-width 定义 样式 表 在 指定 最 小 设备 宽度 情况 下 可 用 
定义 样式 表 在 指定 最 大 设备 宽度 情况 下 可 用 
device-width 定义 样式 表 在 指定 设备 宽度 情况 下 可 用 
min-device-height 定义 样式 表 在 指定 最 小 设备 高 度 情况 下 可 用 
max-device-height 定义 样式 表 在 指定 最 大 设备 高 度 情况 下 可 用 
device-height 定义 样式 表 在 指定 设备 高 度 情况 下 可 用 


代码 


2. 附加 CSS 文件 


显示 开发 者 选择 的 样式 表 应 用 条 件 


附加 CSS 文件 可 以 将 现 有 的 CSS 文件 附加 到 当前 网 页 文档 ， 其 方法 与 创建 新 CSS 
文档 类 似 ， 在 【CSS 设计 器 】 面 板 的 【 源 】 窗 格 中 ， 单 击 【 添 加 CSS 源 】 按钮 鼎 ， 然 后 


即 可 执行 【附加 现 有 的 CSS 文件 】 命 


此 时 ，Dreamweaver 将 弹出 【使 


令 ， 如 图 8-6 所 示 。 


现 有 的 CSS 文件 】 对 话 框 , 该 对 话 框 的 界面 与 【 创 


建新 的 CSS 文件】 对 话 框 内 容 大 体 类 似 ， 如 图 8-7 所 示 。 


生 图 8-6 ,附加 现 有 的 CSS 文件 和 图 8-7_, 使 用 现 有 的 CSS 文件 


该 对 话 框 与 【创建 新 的 CSS 文件 对话 框 最 大 的 区 别 在 于 【浏览 】 按 钮 浏览 的 
功能 不 同 。 在 【创建 新 的 CSS 文件 】 对 话 框 中 ， 选 择 其 【浏览 】 按 钮 ， 济 响 的 作用 
是 选择 指定 的 路 径 , 创建 一 个 CSS 样式 表 文件 ; 而 在 【使 用 现 有 的 CSS 文件 】 对 话 框 中 ， 
选择 【浏览 〗】 按 钮 ， 济 几 的 作用 是 选择 指定 路 径 位 置 下 已 经 创建 好 的 CSS 文件 ， 将 
其 导入 或 绑 定 到 当前 网 页 文档 。 


在 创建 或 引入 CSS 文件 时 ， 开 发 者 可 以 通过 【创建 新 的 CSS 文件 】 以 及 【使 用 现 
有 的 CSS 文件 】 对 话 框 ， 定 义 这 些 CSS 文件 的 媒体 应 用 类 型 。 在 引入 或 绑 定 CSS 文件 
之 后 ， 开 发 者 仍然 可 以 通过 Dreamweaver CC 的 【CSS 设计 器 】 面 板 内 的 【@ 媒 体 】 窗 
格 ， 修 改 这 些 CSS 文件 的 媒体 应 用 类 型 。 

在 修改 媒体 应 用 类 型 时 ， 开 发 者 应 先 在 【CSS 设计 器 】 面 板 的 【 源 】 窗 格 中 选择 指 
定 的 CSS 样式 表 源 ， 然 后 再 在 【@ 媒 体 】 窗 格 中 进行 修改 或 编辑 操作 。 例 如 ， 添 加 一 个 
媒体 应 用 类 型 ， 可 单 击 【@ 媒 体 】 窗 格 中 的 【添加 媒体 查询 】 按 钮 呢 ， 如 图 8-8 所 示 。 

然后 即 可 在 弹出 的 【定义 媒体 查询 】 对 话 框 中 选择 条 件 类 型 ， 并 定义 该 条 件 类 型 下 
的 具体 条 件 内 容 。 例 如 ， 设 置 条 件 类 型 为 “resolution”， 定 义 条 件 内 容 为 “72dpi”， 如 
图 8-9 所 示 。 


和 图 8-8_。 添 加 媒体 查询 和 图 8-9 设置 媒体 应 用 类 型 的 条 件 
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将 鼠标 光标 移动 到 该 条 件 内 容 的 右 侧 ， 此 时 ， 右 侧 将 显示 【添加 条 件 】 按 钮 器 ， 单 
击 此 按钮 ， 然 后 即 可 保存 此 条 件 ， 将 此 条 件 与 其 他 条 件 合并 使 用 ， 如 图 8-10 所 示 。 


和 刁 图 8-10 创建 媒 体 应 用 类 型 的 条 件 


在 完成 所 有 条 件 的 编辑 之 后 ， 单 击 【 确 定 】 按 钮 即 可 将 媒体 应 用 类 型 应 用 到 样式 


在 完成 样式 规则 源 以 及 媒体 应 用 类 型 的 
设置 之 后 ， 即 可 在 【CSS 设计 器 】 面 板 的 【 先 
择 器 】 窗 格 和 【属性 】 窗 格 定义 具体 的 CSS 规 
则 ， 以 可 视 化 的 方式 来 决定 网 页 元 素 的 显示 
效果 。 

1， 定 义 选择 器 

在 【Css 设计 器 】 面 板 的 【选择 器 】 窗 格 
中 ， 单 击 【 添 加 选择 器 】 按 钮 三 。 根 据 
在 文档 中 选择 的 元 素 ，【CSS 设计 器 】 会 智能 
确定 并 提示 使 用 相关 选择 器 ， 如 图 8-11 所 示 。 一 
然后 ， 即 可 在 【选择 器 】 窗 格 下 方 新 增 的 ”了 图 。 深 加 选择 吕 
输入 框 中 输入 选择 规则 ， 诸 如 选择 器 ， 或 选择 方法 等 ， 按 下 回 车 之 后 ， 即 可 完成 选择 规 
则 的 创建 ， 如 图 8-12 所 示 。 

【选择 器 】 窗 格 不 仅 可 以 创建 CSS 的 选择 规则 ， 还 支持 开发 者 对 已 有 的 选择 规则 进 
行 搜索 和 编辑 ， 方 法 如 下 。 


口 若 要 搜索 特定 选择 器 ， 使 用 窗 格 顶部 的 搜索 框 。 

口 若 要 重 命名 选择 器 ， 单 击 该 选择 器 ， 然 后 输入 所 需 的 名 称 。 

口 若 要 重新 整理 选择 器 ， 将 选择 器 拖 至 所 需 位 置 。 

口 若 要 将 选择 器 从 一 个 源 移 至 另 一 个 源 ， 可 以 将 该 选择 器 拖 至 【 源 】 窗 格 中 所 需 的 
源 上 。 

口 若 要 复制 所 选 源 中 的 选择 器 ， 可 以 右 击 该 选择 器 ， 然 后 执行 【复制 】 命 令 。 

口 若 要 复制 选择 器 并 将 其 添加 到 媒体 查询 中 ， 如 右 击 该 选择 器 ， 将 鼠标 悬 停 在 【 复 
制 到 媒体 查询 中 】〗 上 ， 然 后 选择 该 媒体 查询 。 


2. 定义 属性 


CSS 样式 表 的 属性 类 型 包含 许多 种 ， 在 Dreamweaver CC 的 【CSS 设计 器 】 面 板 中 ， 
大 体 将 其 分 为 5 个 类 型 ， 即 布局 、 文 本 、 边 框 、 背 景 以 及 其 他 等 。 在 默认 状态 下 ， 
Dreamweaver CC 的 【CSS 设计 器 】 会 显示 选择 器 的 “布局 ”CSS 属性 ， 如 图 8-13 所 示 。 


和 图 8-12 创建 选择 规则 和 图 8-13 CSS 的 布局 属性 


开发 者 可 以 在 【属性 】 窗 格 内 的 选项 卡 组 中 单 击 【 文 本 】 按 钮 国 、【 边 框 】 按 钮 贺 、 
【背景 】 按 钮 图 以 及 【 自 定 义 】 按 钮 图 等 ， 在 更 新 的 界面 中 分 别 以 可 视 化 的 方式 定义 网 页 
元 素 对 应 类 型 的 CSS 属性 。 


8.6 ”课堂 练习 : 


在 编写 网 页 时 ， 需 要 使 用 到 XHTML 的 列表 技术 制作 导航 条 ， 并 使 用 定义 列表 和 标 
题 标签 实现 文本 的 排版 。 然 后 , 再 通过 CSS 样式 表 , 来 定义 文档 中 的 标签 样式 , 如 图 8-14 
所 示 。 
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注 条 网 
ee 
ee 人 
黄 芍 楼 一 一 旅游 景点 简介 

过 


当下 山 得。 二 和 匀 水， 兴 下 工人 后 地 忆 生 二 家 
之 避 人 全 和 天 ， 二 


| 
和 
人 


车 页 。 到 到 上。 扰 点 。 束 生 和 


两 二 生 So 汉 这 下 好 tk 加 革 过， 可 贡 地 有 部 估 于 于 


和 _ 图 8-14 景点 介绍 页 
操作 步骤 : 


虑 加 FEEDE 王 汪 本 


在 Dreamweaver 中 ， 创 建 一 个 空白 文档 。 
然后 ， 在 【 文档 】 栏 的 【 标题 】 文 本 框 中 输 
入 “景点 介绍 页 ”文本 ， 最 后 保存 HTML 
文档 ， 如 图 8-15 所 示 。 


DERE Real PUBLIC -77NOC77EID WIRE TY0 
Trnatrtonal7VPR 
whetps /mw3.org/TR/xhtnll /DID/xhtnll-transitional .ded 


> 
haml xmlnsnrnctp://www-w3.ora/1999/xhoml-> 

neady 

neta hrrp-equiv-"Conrenr Type” conrener"cexr/brzly 
charaeczucf-6v /> 

FEIe? 最 点 介绍 页 <7rtriey 

</head> 


ER ] 具 | 


E/N iests Mr) 


和 图 8-15 设置 网 页 标题 


将 光标 置 于 “body” 代 码 标签 内 ， 插 入 3 
个 id 分 别 为 “header" “content? 和 “footer” 
的 div 标签 ， 用 来 布局 整个 页 面 ， 代 码 如 下 
所 示 。 


<body> 

<div id="header"> </div> 
<div id="content"></div> 
<div id="footer"></div> 
</body> 


将 光标 置 于 id 为 header 的 div 标签 内 , 插 


入 id 分别 为 “logo” 和 “nav” 的 两 个 div 
标签 ， 代 码 如 下 所 示 。 


<div id="header"> 
<div id="logo"></div> 
<div id="nav"></div> 
</div> 


在 id 为 logo 的 div 标签 内 插入 logo 图 像 。 
然后 在 id 为 nav 的 div 标签 内 插入 项 目 列 
表 ， 代 码 如 下 所 示 。 


<div id="header"> 
<div id="1ogo"><img src="images/ 
logo.jpg" /></div> 
<div id="nav"> 
<ul> 
LL 
l==2000= = 
<1i></1Li> 
</ul> 
</div> 
</div> 
然后 , 在 ii 标签 内 输入 列表 项 内 容 ， 并 为 列 
表 项 添加 链接 ，href 指向 链接 页 地 址 ,代码 
如 下 所 示 。 


<div id="nav"> 


<ul> 
<li><a href="index.html"> 
首页 </a></1i> 
<1 一 一 …… 一 二 > 


<1i><a href="contact.html"> 


联系 我 们 </a></1i> 


</ul> 
</div> 


回 执行 [文件 1]1[ 新 建 ] 命令, 在 弹出 的 【新 
建文 档 ] 对 话 框 中 , 【 页 面 类 型 ] 选择 CSS， 
单 击 【 创建 ] 按钮 ， 创 建 CSS 文件 ， 并 执 
行 保存 命令 将 该 文件 保存 至 项 目 所 在 目录 
的 styles 文件 夹 内 。 

加 在 网 页 页 面 中 ， 将 光标 置 于 head 标签 内 
使 用 link 标签 链接 刚刚 创建 CSS 文件 ， 代 
码 如 下 所 示 。 


<link 
rel="stylesheet" type="text/css" /> 


图 在 CSS 文 件 内 , 使 用 标签 选择 器 定义 body 
标签 的 样式 。 其 中 ,定义 整个 页 面 边 距 、 显 
示 方 式 、 背 景 颜 色 、 页 面 宽度 等 属性 ， 代 码 
如 下 所 示 。 


href="styles/index.css" 


body { 
margin:0px auto; 
background-color:#e3e3e3; 
font-size:12px; 
width:900px; 
background-image:url(../ 
images/bg.jpg) !important; 

上 


图 使 用 id 选择 器 定义 id 为 header 和 logo 的 
div 标签 的 样式 。 定义 header 的 上 边 距 、 高 
度 ; logo 的 显示 方式 、 宽 度 、 高 度 、 浮 动 方 
式 等 属性 ， 代 码 如 下 所 示 。 


#header { 
height:80px; 
background-image:url(../ 
images/tbg.jpg); 

1 

#header #1logo { 
display:block; 
width:200px; 
height:70px; 
float:left; 

| 


定义 id 为 nav 的 div 标签 的 CSS 样式 。 定 
义 显 示 方式 、 宽 度 、 高 度 、 浮 动 方式 、 边 距 


等 属性 ， 代 码 如 下 所 示 。 


#header #nav { 
display:block; 
width:570px; 
height:35px; 
float:left; 
margin-top:30px; 
margin-left:40px; 
font-size:14px; 
font-family:" 宋 体 "; 
} 
然后 ， 定 义 id 为 nav 的 div 中 的 项 目 列表 
标签 的 CSS 样式 ， 包 括 整 个 项 目 列表 、 列 
表 项 。 定 义 项 目 列表 浮动 方式 、 内 边 距 、 帘 
度 等 属性 ， 定 义 列表 项 的 显示 方式 ， 代 码 如 
下 所 示 。 


山中 


#header #nav ul { 
float:left; 
padding: Opx; 
list-style: none; 
background-image:url(../ 
images/navbjtemp.jpg); 


使 
用 
样 
式 
表 


AR #nav ul li { 

display: inline; 
1 
定义 列表 项 中 链接 和 鼠标 经 过 链接 的 CSS 
样式 。 定 义 链接 的 浮动 方式 、 内 边 距 、 文 本 
对 齐 方式 、 文 本 类 型 等 属性 ; 定义 鼠标 经 过 
链接 时 的 文本 颜色 ， 代 码 如 下 所 示 。 


#header #nav ul li a { 
float: left; 
padding: 11px 20px; 
text-align: center; 
text-decoration: none; 
color:#000; 
background-image:url(../ 
images/navim.png); 
background-repeat:no— 
repeat; 
background-position:center 
right; 

} 

#header #nav 1i a:hover { 
Color:#FFF; 
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将 光标 置 于 id 为 content 的 div 标签 内 , 插 
入 一 级 标题 标签 hl, 并 在 ht 标签 内 输入 标 
题 文 本 ， 代 码 如 下 所 示 。 


<div id="content"> 
<h1> 黄 稚 楼 一 旅游 景点 简介 </h1> 


</div> 

再 向 id 为 content 的 div 标签 内 插入 定义 列 
表 ， 在 dt 标签 内 插入 四 级 标题 h4， 并 向 dl 
标签 内 插入 段落 和 图 像 , 还 可 以 用 同样 的 方 
法 向 定义 列表 中 插入 多 个 定义 术语 和 定义 ， 


代码 如 下 所 示 。 
<dl> 
<dqt> 
<h4> 景 点 概述 </h4> 
</dt> 
<dd> 
<P> 冲 决 巴山 …- 位 于 湖北 省 武汉 
市 。</p> 
<img src="images/hhl .jpg" 
alt=""/> 


<p> 黄 稚 楼 是 古典 … 与 日 月 共 长 


东 习 : 文章 页 面 


存 原因 之 所 在 。</P> 
</dd> 
Ed je ES 


</d1l> 


将 光标 置 于 id 为 footer 的 div 标签 内 ,插入 
段落 , 段落 内 容 为 该 网 页 的 版 权 信 息 , 代码 
如 下 所 示 。 


<div id="footer"> 


<p>Copyright &copy; 1998 - 


2011 WoXingNet. All Rights Reserved 


</p> 
</div> 
定义 id 为 footer 的 div 标签 的 CSS 样式 。 


网 页 中 大 量 的 文章 都 是 由 一 个 个 的 段落 组 合 到 
文本 属性 来 制作 时 尚 网 页 页 面 ， 如 图 8-16 所 示 。 


稳 多 月 时 尚 网 


定义 文本 颜色 、 字 体 大 小 和 文本 对 齐 方式 等 
属性 ， 代 码 如 下 所 示 。 
#footer { 
Color:#666; 
font-size:12px; 
text-align:center; 


-起 的 ， 本 练习 通过 定义 段落 属性 、 


和 图 8-16 添加 文章 内 容 


操作 步骤 : 

打开 素材 页 面 “index.html”, 将 光标 置 于 ID 
为 leftmain 的 Div 层 中 , 单 击 【 插入 Div 标 
签 】 按钮 ， 如 图 8-17 所 示 。 
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点 图 8-17 插入 <div> 标 签 


创建 ID 为 title 的 Div 层 , 并 设置 其 CSS 样 
式 属性 ， 如 背景 颜色 、 边 框 颜色 、 高 度 等 ， 
如 图 8-18 所 示 。 


和 图 8-18 设置 CSS 样式 


在 ID 为 title 的 Div 层 中 输入 文本 ， 然 后 选 
择 文本 ,在 【 属性 ] 检查 器 中 设置 文本 【 链 
接 ] 为 “javascript'void(nulh);”， 如 图 8-19 
所 示 。 


G2 
罗 > A 2 S92 


点 了 图 8-19 添加 文本 及 链接 


再 单 击 【 插入 Div 标签 】 按钮 ,创建 ID 为 
homefitle 的 Div 层 , 并 设置 其 CSS 样式 属 
性 。 将 光标 置 于 ID 为 homeTitle 的 Div 层 中 ， 
分 别 创建 ID 为 htitle、publish、mark 的 Div 
层 ， 并 定义 其 CSS 样式 属性 ， 如 图 8-20 
所 示 。 


下 多 AAA 
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和 图 8-20 ,添加 其 他 Div 层 


将 光标 置 于 ID 为 htitle 的 Div 层 中 , 输入 文 
本 。 再 将 光标 置 于 ID 为 publish 的 Div 层 中 ， 
分 别 炭 套 ID 为 zz、times、pl 的 Div 层 , 并 
设置 其 CSS 样式 属性 。 其 中 ，ID 为 times、 
pl 的 两 个 Div 层 CSS 样式 属性 设置 相同 。 
然后 在 这 三 个 Div 层 及 ID 为 mark 的 Div 层 
中 输入 相应 的 文本 ， 如 图 8-21 所 示 。 
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8-21 添加 文本 及 样式 


图 在 CSS 样式 中 分 别 创建 类 名 称 为 font2、 
font3 的 样式 ， 然 后 选择 文本 ， 在 【 属性 】 
检查 器 中 ,设置 【类 】 然后 ， 单 击 【 插入 
Div 标签 】 按钮 ， 创 建 ID 为 mainHome 的 
Div 层 ,并 设置 其 CSS 样式 属性 ,如 图 8-22 
所 示 。 
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和 图 8-22 ,添加 Div 层 


将 光标 置 于 1D 为 mainHome 的 Div 层 中 ， 
输入 文本 , 一 共 分 为 4 个 段落 。 在 标签 栏 选 


了 练习 


择 P 标签 ， 在 CSS 样式 中 定义 其 行 高 、 文 
本 缩 进 等 CSS 样式 属性 ， 如 图 8-23 所 示 。 


EE ee ee TT 
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| 请 元 需 ， 只 方 吾 身 北 标的 人 才 素 育 正 的 焉 RS| 它 拖 4 的 气息 ; 同样 ，MSVI 字 近 完 关 的 设计 必 光 要 
人 
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在 了 图 8-23 添加 并 设置 文本 样式 


一 、 填 空 题 


1. 在 网 站 项 目 中 ， 开 发 者 可 以 使 用 三 种 类 
型 的 CSS 样式 表 与 网 页 文档 建立 关联 ， 即 
和 。 


2. CSS 样式 表 分 为 两 个 部 分 ,， 即 = 
3. CSS 样式 表 的 每 一 条 样式 规则 都 由 
和 组 成 。 
4. CSS 样式 表 的 选择 器 中 ， 的 
优先 级 最 高 ， 其 次 为 ” ， 再 次 为 
， 最 低 者 为 Ee 
5.Dreamweaver 的 【CSS 设计 器 】 面 板 分 
为 、 以 及 
等 4 个 区 块 。 
二 、 选 择 题 


1. 外 部 CSS 样式 表 需 要 通过 HIML 5 的 
_ 标记 导入 网 页 文档 中 。 
A. 样式 标记 STYLE 
B. 脚本 标记 SCRIPT 
C. 超 链接 标记 和 人 
D. 外 链 标记 LINK 
2. 内 部 CSS 样式 表 需 要 通过 HTMLS5 的 
标记 来 存放 样式 代码 。 
A. 样式 标记 STYLE 
B. 脚本 标记 SCRIPT 
C. 超 链 接 标记 A 
D. 外 链 标 记 LINK 


3. 在 定义 网 页 元 素 在 鼠标 滑 过 时 的 状态 时 ， 
需要 使 用 到 伪 类 选择 器 。 
A. :hover 
B. :link 
C. :focus 
D. :visited 
4. 在 设置 指定 层级 关系 下 的 子 元 素 时 ， 可 
以 使 用 来 选择 此 元 素 。 
.分 组 选择 
.派生 选择 
.全 局 匹配 
5. 以 下 哪 种 类 型 的 数据 无 法 表示 CSS 样式 
表 中 的 颜色 ? 
A. 十 六 进 制 数字 
B. 十 进 制 数字 
C. 英文 名 称 单词 
D， 百 分 比 函 数 
6. 使 用 可 以 提升 属性 的 优先 级 。 
A. 重点 操作 符 
B. 提 权 符号 
C. 大 括号 
D. 小 括号 


三 、 简 答题 


DNH» 


1. 简 述 CSS 的 语法 规则 。 

2. CSS3 的 新 增 功能 都 有 哪些 ? 

3. CSS3 的 属性 选择 器 都 有 哪些 优点 ? 
4. CSS 属性 的 值 都 有 哪些 类 型 ? 

5. 如 何 改变 选择 器 的 优先 级 ? 


第 9 章 
使 用 表单 


9.1 表单 组 件 概 述 


类 型 的 交互 操作 目标 ， 以 快速 捕获 用 户 的 一 些 特殊 交互 操作 ， 诸 如 鼠标 单 击 、 鼠 标 滚轮 
滑动 、 鼠 标 选择 、 键 盘 输入 等 ， 在 终端 用 户 单 击 表单 的 【提交 】 按 钮 之 后 ，Web 浏览 器 
会 将 这 些 交 互 操作 所 产生 的 数据 提交 给 服务 器 ， 由 服务 器 来 进行 处 理 ， 诸 如 存储 到 数据 
库 ， 以 及 通过 刷新 页 面 反馈 给 终端 用 户 ， 或 通过 Ajax 技术 直接 反馈 给 终端 用 户 等 。 

以 上 这 种 业务 处 理 机 制 是 所 有 基于 服务 器 端 应 用 程序 的 动态 网 页 的 基本 业务 流程 ， 
如 图 9-1 所 示 。 


服务 器 处 理 表单 


[9 
数据 库 
= 


用 户 昵 称 | 真实 姓名 | 年 ” 葵 | 职 ” 业 


FE 


服务 器 


各 了 图 9-1 ,动态 网 页 的 基本 业务 流程 


表单 组 件 捕获 的 用 户 操作 数据 可 以 提交 给 多 种 服务 器 端 应 用 程序 , 诸如 ASP、PHP、 
ASP.NET、JSP 等 。 在 互联 网 中 ， 绝 大 多 数 网 站 都 通过 表单 技术 来 与 终端 用 户 进行 人 机 
数据 交互 。 了 解 表单 技术 ， 有 助 于 开发 者 实现 完整 地 动态 交互 网 站 。 
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表单 容器 又 被 称 作 表单 域 ， 其 本 身 在 网 页 文档 中 并 不 会 直接 显示 出 来 ， 而 是 作为 一 
种 容器 ， 用 于 存储 一 系列 通过 同一 个 提交 按钮 提交 数据 的 表单 组 件 。 

在 一 个 表单 容器 中 ， 通 常 只 能 存放 一 个 【提交 】 按 钮 和 一 个 【 重 置 】 按 钮 ， 以 及 若 
干 交 互 表单 组 件 ， 当 终端 用 户 操作 这 些 交 互 表单 组 件 之 后 ， 单 击 【 提 交 】 按 钮 即 可 将 这 
些 数据 提交 ， 而 单 击 【 重 置 】 按 钮 之 后 可 将 这 些 交 互 表单 组 件 初始 化 为 页 面 加 载 时 的 初 
始 状 态 。 

在 传统 的 HITP Post 或 HTTP Get 表单 提交 方法 体系 下 ， 表 单 容器 的 作用 是 不 可 替 
代 的 ， 所 有 数据 的 交互 提交 都 必须 依赖 表单 容器 进行 。 仅 有 当 开发 者 采用 异步 交互 方式 
(Ajax) 提交 数据 时 ， 才 可 以 通过 JavaScript 以 
虚拟 表单 容器 的 方式 来 提交 数据 。 


前 潍 讨 茹 
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在 Dreamweaver 中 ， 开 发 者 可 以 通过 【 插 
入 】 面 板 来 插入 表单 容器 。 在 “设计 ”视图 下 
开启 【插入 】 面 板 ， 选 择 【 表 单 】 选 项 卡 ， 然 
后 即 可 单 击 【 表 单 】 按 钮 副 卉 于 ,插入 表单 容 
器 ， 如 图 9-2 所 示 。 


和 图 9-2_ ,插入 表单 容器 


在 “设计 ”视图 下 ，Dreamweaver CC 默认 以 红色 虚线 来 显示 表单 容器 ,将 其 与 普通 
网 页 元 素 区 分 开 来 。 


开发 者 除了 可 以 在 “设计 ”视图 通过 【插入 】 面 板 来 插入 表单 外 ， 也 可 以 通过 “ 代 
码 ” 视 图 直接 使 用 HIML 结构 语言 的 表单 容器 标记 FORM 定义 一 个 表单 ， 代 码 如 下 。 


<form action="http://www.test.com/login" method="post"> 
</form> 


HTML 5 的 表单 容器 标记 FORM 与 其 他 HIML 5 标记 类 似 , 都 具有 一 些 属性 以 定义 
表单 的 属性 ， 如 表 9-1 所 示 。 
52 表 9-1 ,HTML 5 表单 容器 标记 FORM 的 属性 


属 性 值 1 
ope 字符 集 列表 人 可 处 理 的 表单 字 
三 定义 表单 提交 数据 的 服务 器 端 对 应 接口 
程序 URL 友 
人 启用 表单 的 自动 完成 功能 音 
i ET 禁用 表单 的 自动 完成 功能 
application/x-www-form-ulrencoded ”| 默认 值 ， 在 发 送 表 单 之 前 编码 所 有 字符 上 6 
a 不 对 字符 编码 (请 勿 在 需要 使 用 文件 上 传 表 
和信 


将 空格 转换 为 加 号 “+”， 但 不 对 特殊 字符 


text/plain 编码 
wd [gt | 使 用 HTTPGet 方 法 传递 数据 
post 使 用 HTTP Post 方法 传递 数据 
name 定义 表单 的 名 称 
novalidate novalidate 使 用 此 属性 后 ， 提交 表单 之 间 Web 浏览 
器 不 会 对 数据 进行 验证 
以 新 窗口 的 方式 打开 反馈 的 URL 


在 打开 反馈 的 URL 时 ， 定 义 将 文档 加 载 
到 包含 该 链接 的 父 框架 集 或 窗口 中 。 如 果 
目标 框架 不 是 嵌 套 的 , 则 文档 将 加 载 到 整 
个 浏览 器 窗口 中 


target 在 打开 反馈 的 URL 时 ， 定 义 在 当前 的 窗 
二 口中 打开 文档 


在 打开 反馈 的 URL 时 ， 定 义 将 文档 加 载 


_self 


-top 到 整个 浏览 器 窗口 中 ， 并 删除 所 有 框架 
本 在 打开 反馈 的 URL 时 ， 定 义 将 文档 加 载 
到 浏览 器 窗口 内 指定 ia 的 框架 内 


在 HIML 5 结构 语言 中 ,开发 者 在 定义 表单 容器 标记 FORM 时 , 必须 定义 一 个 action 
属性 , 以 定义 提交 数据 的 目标 , 同时 也 必须 定义 一 个 method 属性 ， 0 
在 了 解 了 以 上 各 种 表单 容器 标记 FORM 的 属性 之 后 , 开发 者 即 可 自行 编写 表单 容 
FORM 的 代码 ， 也 可 以 方便 地 通过 Dreamweaver CC 提供 的 表单 容器 【属性 】 es 

设置 表单 的 属性 ， 如 图 9-3 所 示 。 


上 一 小 节 中 介绍 了 HTML 5 的 表单 容器 标记 FORM， 该 标记 具备 一 个 method 属性 


以 定义 提交 数据 所 采用 的 HITP 方法 , 主要 包括 两 种 , 即 HITP POST 方法 和 HITP GET 
方法 。 这 两 种 方法 也 是 所 有 客户 端 和 服务 器 端 
之 间 传 输 数据 的 基本 方法 。 

1 HTTPPOST 方 法 


Post 方法 的 作用 是 向 指定 的 服务 器 端 资源 
提交 要 被 处 理 的 数据 ， 其 可 以 向 服务 器 端 发 送 | | -加 


和 | we[]) 
一 个 存储 多 种 类 型 信息 的 对 象 ， 通 过 该 对 象 中 ee 二 
的 属性 来 实现 数据 的 传递 。 如 果 开 发 者 使 用 Ee 

Web 浏览 器 的 开发 者 工具 来 抓 取 Post 方 法 向 服 
务 器 端 传输 的 数据 ， 那 么 大 概 可 以 捕获 到 的 报 
文 如 下 所 示 。 


vesg 7] 


和 图 9-3 ,设置 表单 容器 标记 的 属性 


POST Path HTTP/1.1 
Host: HostName 
Keyl=Valuel&Key2=Value2...... 


在 上 面 的 伪 代 码 中 ，Path 关键 字 表 示 Post 方法 请 求 的 具体 路 径 ，HostName 关键 字 
表示 请 求 的 主机 域名 或 他 地 址 ; Keyl1、Key2 等 关键 字 表 示 传 输 的 键 名 ; Valuel、Value2 
等 关键 字 表 示 传 输 的 键 名 对 应 的 值 。 

例如 ， 向 本 地 主机 127.0.0.1 下 的 Test/test.php 地 址 传输 两 个 值 ， 分 别 为 用 户 的 账户 
名 account， 其 值 为 SeraChain， 密 码 password， 其 值 为 123456， 那 么 其 传递 的 值 应 如 下 
所 示 。 

POST /Test/test.php HTTP/1.1 

Host> L200 

account=SeraCchaingpassword:123456 


Post 方法 本 身 具 有 以 下 几 种 特性 : 

口 Post 方法 的 请 求 不 会 被 缓存 

口 Post 方法 的 请 求 也 不 会 被 保留 到 Web 浏览 器 的 历史 记录 中 

口 Post 方法 的 请 求生 成 的 页 面 不 能 被 收藏 到 Web 浏览 器 的 收藏 夹 中 

口 Post 方法 的 请 求 对 数据 的 长 度 没有 要 求 

因此 ， 如 果 开 发 者 的 服务 器 无 法 使 用 缓存 文件 ， 或 需要 用 户 上 传 某 些 指 定 类 型 的 文 

件 ， 再 或 者 需要 发 送 包含 位 署 类 型 字符 的 数据 时 ， 必 须 使 用 Post 方法 来 传递 数据 。Post 

方法 更 适合 处 理 一 些 向 服务 器 提交 的 重要 类 型 数据 , 其 传递 数据 的 方式 更 加 可 靠 和 安全 。 
Post 方法 支持 多 种 类 型 的 编码 ， 诸 如 application/x-www-form-urlencoded 、 

multipart/form-data、text/plain 等 类 型 的 编码 都 可 以 被 应 用 到 POST 方法 中 (通过 表单 容 

器 标记 FORM 的 enctype 属性 ) ， 可 以 传递 字符 串 ， 也 可 以 传递 二 进 制 数 据 。 


2. HITRiIGET 为 法 
Get 方法 的 作用 是 从 指定 的 服务 器 资源 请 求 数据 ， 其 可 以 较 快 的 速度 从 服务 器 获取 


简单 的 数据 ， 通 过 一 个 简单 的 键 / 值 字符 串 来 传递 数据 ， 实 现 前 后 端 数 据 交互 。Get 方法 
必须 通过 URL 来 传递 或 请 求 数 据 , 使 用 Get 方法 将 获取 到 字符 串 格 式 的 数据 , 如 下 所 示 。 


Path?Keyl=Valuel&gKey2=Value2.…- 


在 上 面 的 伪 代 码 中 ，Path 关键 字 表示 请 求 的 服务 器 中 指定 的 路 径 ，Key1、Key2 关 
键 字 表示 请 求 的 键 ; Valuel、Value2 关键 字 表示 请 求 的 值 。 

例如 ， 以 Get 方法 的 方式 向 本 地 主机 127.0.0.1 下 的 Test/test.php 地 址 传输 两 个 值 
分 别 为 用 户 的 账户 名 account， 其 值 为 SeraChain， 密 码 password， 其 值 为 123456， 那 么 
其 传递 的 值 应 如 下 所 示 。 


Test/test.php?account=SeraChaingpassword=123456 


Get 方法 本 身 具 有 以 下 几 种 特性 : 
口 相对 Post 方法 而 言 ，Get 方法 的 速度 稍 快 
口 Get 方法 的 请 求 可 以 被 缓存 
口 Get 方法 的 请 求 会 被 保留 到 Web 浏览 器 的 历史 记录 中 
口 Get 方法 的 请 求生 成 的 页 面 可 以 被 收藏 到 Web 浏览 器 的 收藏 夹 中 
口 由 于 Get 方法 传输 的 数据 都 会 被 以 明文 的 方式 显示 在 URL 中 ， 因 此 Get 方法 不 
适合 在 处 理 一 些 敏感 数据 时 使 用 (诸如 用 户 的 密码 等 ) 
口 Get 方法 具有 长 度 的 限制 ， 通 常情 况 下 净 支 持 不 超过 2048 个 字符 的 数据 传递 
Get 方法 更 适合 从 Web 服务 器 中 取 回 一 些 非 敏 感 类 型 的 数据 ， 以 较 快 的 速度 来 将 这 
些 数据 加 载 到 Web 页 中 。 如 果 需 要 向 服务 器 提交 一 些 复杂 而 敏感 的 数据 ， 则 不 应 使 用 
Get 方法 。 
Get 方法 仅 支持 application/x-www-form-urlencoded 类 型 的 编码 (也 一 样 通过 表单 容 
器 标记 FORM 的 enctype 属性 ) ， 只 允许 传输 未 编码 和 加 密 的 普通 字符 串 。 


在 表单 容器 标记 FORM 内 , 如 果 开发 者 需要 通过 文本 来 描述 某 一 个 或 某 一 些 表单 组 
件 , 或 将 若干 表单 组 件 以 组 的 方式 显示 , 则 需要 使 用 到 表单 的 标签 组 件 以 及 数据 集 组 件 。 
标签 组 件 和 数据 集 组 件 本 身 不 承担 数据 前 后 端 交互 的 任务 ， 仅 仅 用 于 表单 的 显示 效果 。 


1. 标签 组 件 


表单 标签 组 件 的 作用 是 显示 一 段 文 本 ， 用 于 描述 某 一 个 或 某 一 组 表单 组 件 。 标 签 组 
件 还 可 以 将 一 些 交 互 组 件 包 右 起 来 ， 扩 大 交互 组 件 的 焦点 区 域 ， 当 用 户 鼠 标 单 击 标签 组 
件 时 ， 标 签 组 件 可 以 将 焦点 自动 转移 到 其 包含 的 交互 组 件 上 。 

HIML 5 通过 标签 标记 LABEL 来 实现 表单 标签 的 功能 ， 并 存储 标签 组 件 的 文本 内 
容 ， 在 下 面 的 代码 中 ， 就 使 用 了 标签 组 件 包括 两 个 单 选 按钮 类 型 的 输入 组 件 ， 定 义 组 件 
的 名 称 ， 代 码 如 下 。 
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<label><input type="radio" name="gender" value="male" /> 男 </label> 
<label><input type="radio" name="gender" value="female" /> 女 </label> 


标签 组 件 是 最 简单 的 交互 组 件 ， 其 除了 可 以 包 奢 其 他 交互 组 件 ( 例 如 输入 组 件 、 列 
表 菜 单 组 件 和 文本 域 组 件 等 ) 之 外 ， 还 可 以 在 非 包 庄 的 状态 下 与 这 些 交 互 组 件 关联 ， 同 
样 起 到 捕获 用 户 鼠 标 焦点 的 功能 ， 此 时 需要 使 用 到 标签 标记 的 for 属性 。 

标签 标记 的 for 属性 其 属性 值 通常 为 标签 组 件 关 联 的 其 他 交互 组 件 的 id 属性 值 ， 例 
如 ， 当 一 个 文本 域 类 型 的 输入 组 件 id 为 account， 那 么 可 以 通过 此 id 属性 与 标签 组 件 建 
立 关 联 ， 代 码 如 下 。 

<label for="account"> 账 户 名 称 </label> 

<input type="text" name="username" id="account" /> 


在 Dreamweaver 中 ， 开 发 者 可 以 直接 在 “代码 ”视图 中 以 输入 代码 的 方式 制作 标签 
组 件 ， 也 可 以 在 【插入 】 面 板 的 “表单 ”选项 
上 内 单 击 【标签 】 按 钮 辆 | 岗 |， 直 接 在 “ 设 
计 ” 视 图 中 插入 一 个 标签 组 件 ， 并 输入 标签 内 
容 ， 如 图 9-4 所 示 。 于 

在 标签 组 件 的 【属性 】 检 查 器 中 ， 开 发 者 和 
可 以 设置 标签 组 件 的 “for” 属 性 ， 具 体 设置 方 


EE 
式 在 此 将 不 再 资 述 。 | 
2. 数据 集 组 件 [Ey mp we vem [TT 
刁 图 9-4 ,插入 标签 组 件 


数据 集 组 件 又 被 称 作 域 集 ， 其 作用 是 为 各 
种 交互 组 件 分 组 、 分 列 ， 对 交互 组 件 进行 归纳 整理 。 在 一 些 复 选 框 类 型 的 输入 组 件 集合 
中 ， 使 用 数据 集 组 件 可 以 更 清楚 地 反映 复 选 框 组 的 范围 ， 使 交互 组 件 更 加 富有 条 理 。 
数据 集 组 件 由 数据 集 标 记 FIELDSET 和 数据 集 标题 标记 LEGEND 组 成 ， 其 关系 类 
似 表格 标记 TABLE 和 表格 标题 标记 CAPTION, 但 是 相 比 之 下 , 数据 集 标题 标记 LEGEND 
在 数据 集 标 记 FIELDSET 中 是 必须 的 ， 不 可 或 缺 。 
在 下 面 的 代码 中 ,就 定义 了 一 个 简单 的 数据 集 组 件 ,通过 数据 集 标题 标 记 (LEGEND) 
显示 数据 集 的 名 称 ， 如 下 所 示 。 
<fieldset> 
<legend>health information</legend> 
<label>height: <input type="text" /></label> 


<label>weight: <input type="text" /></label> 
</fieldset> 


数据 集会 显示 出 一 个 边框 ， 将 其 包 时 的 内 容 环 绕 起 来 。 在 Dreamweaver CC 中 ， 开 
发 者 可 以 通过 【插入 】 面 板 的 【 域 集 】 按 钮 所 ss， 在 弹出 的 【 域 集 】 对 话 框 中 输入 【 标 
签 】 名 称 ， 如 图 9-5 所 示 。 

单 击 【 确 定 】 按 钮 之 后 ， 即 可 将 数据 集 插入 到 当前 表单 容器 中 ， 如 图 9-6 所 示 。 


PO ,PET 1, EPE ,PPT 二 本 EP ;PP TP + 二 1 <!doctype htnl> ~ 
2 <hinl> 
3 <head> 
4 <meta charset="utf-8"> 


5 ”<title> 无 标题 文档 </title> 
5 </head> 


<body> 
jid="forml" name="forml method="post" 


目 <legen > 丽人/1ege 

有 | 于! | 训 二 re 

芝 | </htmt> 

日 v 
和 图 9-5_, 输 入 域 集 的 标签 和 图 9-6 ,插入 后 的 数据 集 


9.3 输入 组 件 有 


输入 组 件 是 HTML 5 中 最 复杂 的 组 件 ， 其 复杂 性 体现 在 其 不 仅 包 含 HTML 5 中 最 多 
的 自 定义 属性 , 还 体现 在 可 以 在 Web 浏览 器 中 以 多 种 形式 显示 和 存在 ， 具 有 强大 的 用 户 


交互 功能 。 


在 使 用 输入 组 件 时 ,开发 者 需要 通过 HTML 5 的 输入 组 件 标记 INPUT 定义 组 件 的 各 
种 属性 和 功能 。INPUT 标记 是 一 个 非 闭合 标记 ， 其 主要 包括 三 类 属性 ， 即 基本 属性 、 表 
单 容器 属性 和 辅助 输入 属性 。 

1， 基 本 属性 

输入 组 件 标记 的 基本 属性 主要 由 XHTML 1.0 继承 而 来 ， 用 于 描述 输入 组 件 标记 自 
身 的 各 种 状态 和 性 能 信息 ， 如 表 9-2 所 示 。 
32 表 9-2 。 输入 组 件 标记 的 基本 属性 


定义 上 传 域 的 文件 类 型 〈 仅 当 type 属性 值 为 fle 时 有 效 ) 
定义 图 像 域 的 替代 文本 〔 仅 当 type 属性 值 为 mage 时 有 效 ) 
允许 使 用 自动 完成 功能 ( 仅 当 type 属性 值 为 text 时 有 效 ) 
| of | 禁止 使 用 自动 完成 功能 ( 仅 当 type 属性 值 为 text 时 有 效 ) 
定义 此 输入 组 件 在 页 面 加 载 时 自动 获得 焦点 〈 每 个 页 面 中 只 能 有 
一 个 输入 组 件 具有 此 属性 , 该 属性 在 type 属性 值 为 hidden 时 无 效 ) 
定义 此 输入 组 件 在 页 面 加 载 时 默认 处 于 选中 状态 〈 仅 当 type 属性 
值 为 checkbox 或 radio 时 有 效 ) 


accept 
alt 


autocomplete 


autofocus autofocus 


checked checked 


disabled disabled 定义 此 输入 组 件 默认 处 于 被 禁用 状态 〈 禁 止 被 用 户 修改 ) 
像素 值 定义 输入 组 件 的 像素 高 度 〈 仅 当 type 属性 值 为 mage 时 有 效 ) 
height 百分比 定义 输入 组 件 相 对 其 父 元 素 的 高 度 百 分 比 〈 仅 当 type 属性 值 为 


image 时 有 效 ) 
定义 输入 组 件 在 提交 数据 时 的 名 称 


册 避 © 小 


局 淋 注 党 


网 
页 
设 
计 
与 
网 
立 

建 
设 
Q 
© 
中 
a 
版 
标 
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属 1 值 作 用 
SIC URL 


续 表 


定义 图 像 域 的 图 像 URL 地 址 〈 仅 当 type 属性 值 为 image 时 有 效 ) 


定义 输入 组 件 为 普通 按钮 域 
定义 输入 组 件 为 复 选 框 域 


button 
checkbox 


date 


datetime 定义 输入 组 件 为 日 期 时 间 选 择 器 ( 仅 Opera 和 Safari 


| color 。 | 定义 输入 组 件 为 颜色 拾取 器 〈 仅 Opera 和 Firefox 浏览 器 支持 ) 
定义 输入 组 件 为 日 期 选择 器 〈 仅 Opera 和 Safari 浏览 器 支持 ) 


浏览 器 支持 ) 


datetime-local 浏览 器 支持 ) 
email 定义 输入 组 件 为 Email 验证 (PC 和 Mac 的 Safari 浏 


定义 输入 组 件 为 日 期 时 间 选 择 器 〈 本 地 时 间 ， 仅 Opera 和 Safari 


览 器 不 支持 ) 


file 定义 输入 组 件 为 文件 域 
i 定义 输入 组 作为 隐藏 域 
3 定义 输入 组 件 为 图 像 域 
定义 输入 组 件 为 月 份 验证 《 仅 Opera 和 Saftari 浏览 器 支持 ) 
pe 二 定义 输入 组 件 为 数字 验证 


定义 输入 组 件 为 密码 域 
radio 定义 输入 组 件 为 单 选 按 钮 域 

定义 输入 组 件 为 数据 范围 验证 
reset 定义 输入 组 件 为 重 置 按钮 域 

定义 输入 组 件 为 搜索 域 〈 仅 Safari 浏览 器 支持 ) 
submit 定义 输入 组 件 为 提交 


定义 输入 组 件 为 文本 域 


text 


url 


value 字符 串 
像素 值 


显示 为 按钮 文本 ) 


width 


百分比 


| ”| 定义 输入 组 件 为 电话 验证 《美国 电话 ， 仅 Safari 浏览 器 支持 ) 


定义 输入 组 件 为 时 间 验 证 ( 仅 Opera 和 Safari 浏览 器 支持 ) 

定义 输入 组 件 为 URL 验证 (PC 和 Mac 的 Safari 浏览 器 不 支持 ) 
| week ”| 定义 输入 组 件 为 星期 验证 ( 仅 Opera 和 Safari 浏览 器 支持 ) 

定义 输入 组 件 的 域 值 ( 当 type 属性 值 为 button、reset 或 submit 时 


定义 输入 组 件 的 像素 宽度 〈 仅 当 type 属性 值 为 image 时 有 效 ) 


定义 输入 组 件 相 对 其 父 元 素 的 宽度 百分比 〈 仅 当 type 属性 值 为 
image 时 有 效 ) 


早期 的 XHTML 结构 语言 只 支持 button、checkbox、file、hidden、image、password、 


radio、reset、submit 和 text 等 10 种 类 型 ， 在 HTML 5 中 ,新 增 了 13 种 输入 


组 件 的 类 型 ， 


以 满足 更 丰富 的 用 户 交互 需求 。 但 是 由 于 HTML 5 仍然 处 于 草案 状态 ， 因 此 并 非 所 有 
Web 浏览 器 都 能 支持 这 些 新 的 交互 组 件 。 目 前 正 浏览 器 就 不 支持 任何 HIML 5 新 交互 
组 件 ，Firefox 浏览 器 对 部 分 简单 交互 组 件 进行 了 有 限 的 支持 ， 只 有 Opera 浏览 器 完整 地 


支持 了 所 有 HIML 5 新 交互 组 件 。 
在 实际 开发 中 ， 开 发 者 可 以 根据 客户 端 群体 的 交互 需求 以 及 浏览 器 使 有 


日 状况 来 决定 


是 否 采纳 这 些 输 入 组 件 。 


通过 输入 组 件 的 基本 属性 ， 开 发 者 可 以 定义 输入 组 件 的 类 型 ， 然 后 再 通过 类 型 相关 
的 属性 来 定义 输入 组 件 的 操作 或 一 些 显示 效果 属性 。 通 常情 况 下 ， 在 实现 基本 的 表单 交 


互 时 ， 使 用 输入 组 件 的 基本 属性 即 可 满足 一 般 需求 。 


2. 辅助 输入 属性 


传统 的 XHTML 1.0 结构 语言 虽然 能 够 满足 一 般 的 用 户 交 互 ， 但 是 往往 无 法 根据 用 
户 操作 的 状况 做 出 及 时 反馈 ， 当 用 户 操作 出 现 错误 时 ， 不 能 够 及 时 提供 给 用 户 正确 的 操 
作 方 法 。 因 此 在 使 用 传统 XHTML 1.0 结构 语言 开发 网 站 时 ， 开 发 者 往往 需要 通过 
JavaScript 脚本 语言 来 编写 单独 的 表单 验证 交互 ， 以 辅助 用 户 的 输入 。 

HTML 5 结构 语言 为 了 改善 这 一 状况 , 其 结合 XHTML 1.0 结构 语言 中 的 已 有 几 种 辅 
助 输入 属性 , 为 输入 组 件 标记 INPUT 新 增 了 一 批 用 于 辅助 用 户 输入 、 根 据 用 户 输入 状况 
进行 快速 验证 并 反馈 结果 的 属性 ， 这 些 属性 就 是 辅助 输入 属性 。 目 前 HIML 5 结构 语言 
支持 的 辅助 输入 属性 如 表 9-3 所 示 。 
2 表 9-3 。 输 入 组 件 标记 INPUT 的 辅助 输入 属性 


属 ”性 四 作用 间 
数字 定义 输入 数字 的 最 大 值 ( 仅 当 type 属性 值 为 date、 number、 month、 章 

FE 贡 yy 
week、range 时 有 效 ) 使 
有 定义 输入 日 期 的 最 大 值 ( 仅 当 ype 局 性 值 为 datetime、 南 
datetime-local、time 时 有 效 ) 单 


maxlength 定义 输入 文本 的 最 大 长 度 
数字 定义 输入 数字 的 最 小 值 ( 仅 当 type 属性 值 为 date、 number、 month、 
week、range 时 有 效 ) 


定义 输入 日 期 的 最 小 值 《 仅 当 type 属性 值 为 datetme 、 
datetime-local、time 时 有 效 ) 

multiple 充 许 输入 组 件 包含 一 个 以 上 的 值 

pattem 下 各 天 直人 | 定义 输入 字段 的 值 模式 和 格式 ， 必 须 为 合法 的 正则 表达 式 字符 册 

Dlaceholder 定义 辅助 用 户 贰 写 输入 字段 时 的 提示 

readonly 定义 输入 组 件 为 只 读 状态 

regired 定 又 输入 组 作为 必 选 状态 

size 定义 输入 字段 的 必须 长 度 〈 仅 当 type 属性 值 为 number 时 有 效 ) 

条 定义 输入 数字 的 数字 间隔 ( 仅 当 type 属性 信 为 range 时 有 效 ) 

i 引用 包含 输入 字段 的 预定 义 选项 数据 列表 (数据 列表 标记 
记 JD DATALIST 的 id 属性 ) 


在 上 表 中 ，maxlength 属性 、readonly 属性 和 required 属性 为 XHTML 1.0 结构 语言 
已 经 引入 的 属性 ， 而 其 他 几 种 属性 则 为 HIML 5 引入 的 新 属性 。 多 数 HTML 5 引入 的 新 
属性 必须 结合 HIML 5 新 增 输入 组 件 类 型 来 使 用 

3. 表单 属性 

在 传统 的 HITP 数据 交互 过 程 中 , 输入 组 件 标 记 INPUT 必须 依赖 表单 容器 组 件 来 提 
交 数 据 。 在 传统 的 XHTML 1.0 结构 语言 中 , 所 有 表单 容器 组 件 下 的 输入 组 件 必须 通过 表 


单 容 器 组 件 的 统一 表单 属性 来 提交 数据 。 
这 种 状况 限定 了 一 个 表单 有 一 个 提交 按钮 来 提交 数据 ,不 能 向 多 个 URL 地 址 以 多 种 


方式 提交 ， 在 需要 向 服务 器 提交 复杂 数据 〈 如 文件 上 传 ) 时 ， 开 发 者 往往 不 得 不 将 整个 
表单 都 采用 较 慢 的 HITP POST 方法 进行 提交 。 
HTML 5 改善 了 这 一 状况 ， 其 允许 输入 组 件 自身 定义 表单 属性 ， 使 Web 浏览 器 在 提 

交 表 单 容器 时 ， 分 别 对 表单 容器 组 件 下 的 提交 进行 处 理 ， 分 别 以 多 种 方式 来 进行 提交 ， 
提高 提交 效率 。 目 前 , HIML 5 的 输入 组 件 标记 INPUT 支持 以 下 几 种 表单 属性 , 如 表 9-4 
所 示 。 
5 表 9-4 。 输入 组 件 标记 INPUT 的 表单 属性 

属 性 


值 作用 
定义 输入 组 件 覆盖 设置 的 一 个 或 多 个 表单 id 属性 值 
定义 输入 组 件 提交 的 URL 地 址 ( 仅 当 输入 组 件 type 属性 
值 为 submit 或 image 时 使 用 ) 
application/x-www-form- | 默认 值 ， 在 发 送 表单 之 前 编码 所 有 字符 〈 仅 当 输 入 组 件 
ulrencoded type 属性 值 为 submit 或 image 时 使 用 ) 


不 对 字符 编码 (请 勿 在 需要 使 用 文件 上 传 组 件 时 定义 此 
formenctype “| multipart/form-data 属性 )( 仅 当 输 入 组 件 type 属性 值 为 submit 或 image 时 
使 用 ) 

将 空格 转换 为 加 号 “+”， 但 不 对 特殊 字符 编码 ( 仅 当 输 
入 组 件 type 属性 值 为 submit 或 image 时 使 用 ) 

使 用 HTTP Get 方 法 传递 数据 ( 仅 当 输入 组 件 type 属性 
值 为 submit 或 image 时 使 用 ) 

使 用 HTTP Post 方法 传递 数据 ( 仅 当 输入 组 件 type 属性 
值 为 submit 或 image 时 使 用 ) 
定义 不 对 表单 进行 验证 即 进行 提交 ( 仅 当 输入 组 件 type 
属性 值 为 submit 或 image 时 使 用 

以 新 窗口 的 方式 打开 反馈 的 URL ( 仅 当 输入 组 件 type 属 
性 值 为 submit 或 image 时 使 用 ) 
在 打开 反馈 的 URL 时 , 定义 将 文档 加 载 到 包含 该 链接 的 
父 框 架 集 或 窗口 中 。 如 果 目 标 框架 不 是 嵌 套 的 ， 则 文档 
将 加 载 到 整个 浏览 器 窗口 中 〈 仅 当 输入 组 件 type 属性 值 
为 submit 或 image 时 使 用 ) 

在 打开 反馈 的 URL 时 ， 定 义 在 当前 的 窗口 中 打开 文档 
( 仅 当 输 入 组 件 type 属性 值 为 submit 或 image 时 使 用 ) 
在 打开 反馈 的 URL 时 , 定义 将 文档 加 载 到 整个 浏览 器 窗 
口中 ， 并 删除 所 有 框架 〈 仅 当 输 入 组 件 type 属性 值 为 
submit 或 image 时 使 用 ) 


URL 


text/plain 


formmethod 


formnovalidate | formnovalidate 
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formtaget _parent 


在 打开 反馈 的 URL 时 , 定义 将 文档 加 载 到 浏览 器 窗口 内 


字符 串 指定 id 的 框架 内 ( 仅 当 输入 组 件 type 属性 值 为 submit 
或 image 时 使 用 ) 
使 用 输入 组 件 的 表单 属性 ， 开 发 者 可 以 方便 地 为 表单 容器 定义 多 个 表单 提交 按钮， 
快速 实现 多 重复 合 提交 。 


HTML 5 的 基本 输入 组 件 主 要 由 XHTML 1.0 继承 而 来 , 其 主要 包括 6 种 , 即 文本 域 、 
密码 域 、 隐 藏 域 、 单 选 域 、 复 选 域 和 文件 域 等 ， 用 于 实现 基本 的 用 户 交互 功能 。 


1. 文本 域 


文本 域 的 作用 是 捕获 用 户 输入 的 一 般 文 本 内 容 , 通常 情况 下 其 在 Web 浏览 器 中 显示 
为 单行 ， 当 文本 内 容 超出 文本 域 显 示范 围 后 不 会 发 生 换 行 作用 。 文 本 域 是 输入 组 件 的 一 
种 ， 当 输入 组 件 标 记 INPUT 的 type 属性 值 为 text 时 ， 就 显示 为 文本 域 状态 。 

在 Dreamweaver 中 将 鼠标 光标 置 于 表单 容器 组 件 内 ， 然 后 即 可 在 【插入 】 面 板 中 单 
击 【 文 本 】 按 钮 EEE 二 避 ， 生 成 一 个 文本 域 ， 如 图 9-7 所 示 。 

Dreamweaver CC 会 自动 为 文本 域 添加 一 个 标签 组 件 , 用 于 描述 该 文本 域 的 作用 , 开 
发 者 可 以 直接 修改 此 标签 组 件 的 文本 内 容 ， 并 在 【属性 】 检 查 器 中 设置 文本 域 的 name 
属性 ，Dreamweaver 会 自动 将 其 与 标签 组 件 的 for 属性 建立 关联 ， 如 图 9-8 所 示 。 


rs FT ,FTP :ms FP FPR 


所 图 9-7_, 创 建文 本 域 和 图 9-8_, 设 置 文本 域 的 属性 
2.， 密码 域 


密码 域 在 显示 外 观 上 与 文本 域 几 乎 一 致 ， 其 区 别 在 于 密码 域 中 的 内 容 会 在 浏览 器 中 
以 密 文 的 形式 显示 (早期 的 浏览 器 通常 以 星 号 “*” 替 代 , 如 今 通 常 由 圆 点 “@ ”来 禁 代 ) 。 
密码 域 也 是 输入 组 件 的 一 种 ， 当 输入 组 件 标记 INPUT 的 type 属性 值 为 password 时 ， 就 
显示 为 密码 域 状态 。 

为 表单 插入 密码 域 的 方式 与 插入 文本 域 类 似 ， 在 【插入 】 面 板 中 选择 【表单 】 选 项 
卡 ， 然 后 即 可 单 击 【 密 码 】 按 钮 EEssaij， 在 表单 中 插入 密码 域 ， 如 图 9-9 所 示 。 

在 【属性 】 检 查 器 中 设置 密码 域 的 name 属性 并 修改 密码 域 对 应 的 标签 组 件 之 后 ， 
即 可 完成 密码 域 的 制作 ， 如 图 9-10 所 示 。 


和 图 9-9_, 插 入 密码 域 和 图 9-10 ,完成 密码 域 制作 
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3. 隐藏 域 


隐藏 域 是 一 种 不 可 见 的 交互 控件 ， 主 要 用 于 根据 脚本 获取 用 户 操作 的 隐 含 信息 进行 
提交 操作 ， 或 在 表单 中 提交 一 些 不 需要 用 户 手动 修改 的 数据 。 隐 藏 域 也 是 输入 组 件 的 一 
种 ， 当 输入 组 件 标记 INPUT 的 type 属性 值 为 hidden 时 ， 就 显示 为 隐藏 域 状态 。 

在 “设计 ”视图 下 ， 开 发 者 可 以 在 【插入 】 面 板 的 【表单 】 选 项 卡 中 单 击 【隐藏 】 
按钮 Ba 于， 即 可 插入 隐藏 域 。 默认 情况 下 ,隐藏 域 在 “设计 ”视图 中 显示 为 一 个 图 标 ， 
如 图 9-11 所 示 。 

隐藏 域 不 能 为 终端 用 户 直 接 提供 交互 功能 , 但 是 开发 者 可 以 直接 为 隐藏 域 定义 name 
属性 并 决定 隐藏 域 提交 的 值 ， 也 可 以 通过 脚本 语言 来 修改 隐藏 域 的 值 ， 提 交 给 服务 器 。 


4. 单 选 域 


单 选 域 通 常 成 组 使 用 ， 显 示 为 空心 圆 形 标志 ， 被 鼠标 单 击 选择 后 变 为 实心 。 如 果 多 
个 单 选 域 的 name 属性 相同 ， 则 其 会 被 识别 为 一 个 单 选 按钮 组 ， 当 组 内 一 个 单 选 域 被 鼠 
标 选 中 后 ， 其 他 同 组 的 单 选 域 选 择 状 态 将 被 清除 。 

单 选 域 也 是 输入 组 件 的 一 种 ， 当 输入 组 件 标记 INPUT 的 type 属性 值 为 radio 时 ， 就 
显示 为 单 选 域 状态 。 

Dreamweaver 提供 了 两 种 方式 来 插入 单 选 域 ， 一 种 是 插入 单独 的 一 个 单 选 域 ， 另 一 
种 则 是 插入 一 组 单 选 域 。 

在 插入 一 个 单独 的 单 选 域 时 ， 开 发 者 可 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 内 单 击 
【 单 选 按钮 】 按 钮 [Gasii， 在 “设计 ”视图 中 编辑 单 选 按钮 的 名 称 ， 如 图 9-12 所 示 。 
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习 图 9-11 ,插入 隐藏 域 和 图 9-12 ,插入 单 选 按钮 


开发 者 可 以 依次 插入 多 个 单 选 按 钮 ， 在 【属性 】 检 查 器 中 为 这 些 单 选 按 钮 设置 一 个 
统一 的 【name】 属 性 值 ， 这 些 单 选 按钮 就 可 以 组 的 方式 工作 。 当 然 ， 开 发 者 也 可 以 直接 
在 【插入 】 面 板 中 的 【表单 】 选 项 卡 内 单 击 【 单 选 按 钮 组 】 按 钮 辆 Js， 直接 以 组 的 
方式 插入 单 选 按钮 ， 如 图 9-13 所 示 。 

然后 ， 即 可 在 弹出 的 【 单 选 按钮 组 】 对 话 框 中 设置 按钮 组 的 属性 ， 如 图 9-14 所 示 。 

在 该 对 话 框 中 ， 开 发 者 可 以 批量 添加 单 选 按 钮 ， 并 设置 其 属性 ， 如 表 9-5 所 示 。 

开发 者 可 在 此 对 话 框 中 直接 设置 各 单 选 域 的 标签 和 值 ， 单 击 【 确 定 】 按 钮 之 后 ， 即 
可 将 这 些 单 选 域 以 组 的 方式 插入 到 网 页 文档 中 ， 如 图 9-15 所 示 。 
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布局 ,使 用 图 换行 特 (<br 标签) 


口 表格 
点 了 图 9-13 插入 单 选 按钮 组 和 图 9-14_, 单 选 按 钮 组 设置 
2% 表 9-5_， 单 选 按钮 组 的 属性 
属 性 作 用 
名 称 定义 单 选 按钮 组 中 所 有 单 选 域 的 name 属性 
在 单 选 按钮 组 中 添加 一 个 单 选 域 
一 删除 当前 所 选 的 单 选 域 
单 选 “| [a| | 将 当前 所 选 的 单 选 域 在 整个 单 选 按钮 组 中 的 顺序 提升 一 位 
按钮 | 品 将 当前 所 选 的 单 选 域 在 整个 单 选 按钮 组 中 的 顺序 降低 一 位 
单 选 域 所 相关 的 标签 组 件 
值 单 选 域 的 值 (Value 属性 ) 
布局 ， 以 换行 符 来 分 隔 所 有 单 选 域 
使 用 “| 表格 建立 一 个 表格 ， 以 表格 单元 格 来 分 隔 所 有 单 选 域 
5. 复 选 域 加 IT J 
并 记 : 
复 选 域 与 单 选 域 的 区 别 在 于 ， 复 选 域 以 空 是 wm 加 
心 矩 形 的 形式 显示 ， 当 被 鼠标 单 击 选中 后 ， 其 ”日 o 愉 过 可 录 
会 变 为 实心 。 另 外 ， 若 干 复 选 域 的 集合 中 ， 人 多 Eh 


许 终端 用 户 同时 选择 其 中 多 个 项 目 。 

复 选 域 也 是 输入 组 件 的 一 种 ， 当 输入 组 件 
标记 INPUT 的 type 属性 值 为 checkbox 时 ， 就 人 《了 图 9-15 。 单 选 按钮 组 
显示 为 复 选 域 状 态 。 , 

在 Dreamweaver 中 , 开发 者 可 以 在 【插入 】 入 
面板 的 【表单 】 选 项 卡 中 单 击 【 复 选 框 】 按 钮 目 喇 一 一 
国葬 硬 |， 然 后 向 网 页 文档 插入 复 选 域 ， 如 图 月 后 二 
9-16 所 示 。 0 

与 插入 单 选 域 类 似 ， 在 插入 复 选 域 时 ， 开 下 涩 自动 间 录 ， 
发 者 也 可 以 组 的 方式 来 插入 复 选 域 ， 即 在 【 插 上 
入 】 面板 的 【表单 】 选 项 卡 中 单 击 【 复 选 框 组 】 


加 eol 


技 人 负面 二 开本 |, 然后 即 可 在 弹出 的 【 复 选 杠 组 】 一 
对 话 框 中 设置 复 选 域 的 属性 ， 如 图 9-17 所 示 。 《了 图 ?16 搬入 揽 选 
该 对 话 框 的 设置 与 【 单 选 接 钮 组】 对 话 框 的 设置 大 体 类 似 ， 出 于 篇 幅 的 限制， 在 此 
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将 不 再 獒 述 。 
6. 文件 域 


文件 域 又 被 称 作 上 传 域 ， 显 示 为 一 个 无 法 输入 内 容 的 文本 域 以 及 一 个 紧 贴 的 浏览 按 
钮 。 单 击 按钮 后 可 以 调用 浏览 器 的 打开 文件 窗口 ， 选 择 所 需 的 文件 ， 将 其 路 径 插 入 到 文 
本 域 中 ， 帮 助 表 单 获取 文件 的 路 径 ， 从 而 在 提交 表单 时 将 文件 上 传 到 服务 器 中 。 

文件 域 也 是 输入 组 件 的 一 种 ， 当 输入 组 件 标记 INPUT 的 type 属性 值 为 file 时 , 就 显 
示 为 文件 域 状态 。 

在 Dreamweaver 中 ， 开 发 者 可 以 通过 【插入 】 面 板 【 表 单 】 选 项 卡 内 的 【文件 】 按 
钮 [EEE 引 ,然后 即 可 为 网 页 文档 插入 一 个 文件 域 , 并 修改 文件 域 的 标签 组 件 , 如 图 9-18 
所 示 。 
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布局 ,使 用 图 换行 符 (<br 标 答 ) 
口 表格 


点 图 9-17_, 复 选 框 组 对 话 框 和 图 9-18_, 插 入 文件 域 


早期 的 XHTML 结构 语言 并 不 能 为 开发 者 提供 一 些 复杂 的 交互 控件 ， 诸 如 日 期 、 时 
间 的 选择 器 等 ， 需 要 开发 者 自行 使 用 JavaScript 脚本 语言 来 编写 。 
HIML 5 结构 语言 改变 了 这 一 状况 ， 其 为 输入 组 件 添加 了 一 系列 用 于 表示 日 期 和 时 
间 类 型 的 组 件 ， 以 帮助 开发 者 快速 调用 和 实现 日 期 与 时 间 的 获取 ， 其 主要 包括 月 份 域 、 
期 域 、 星 期 域 、 时 间 域 、 日 期 时 间 域 、 本 地 日 期 时 间 域 等 几 种 特殊 的 输入 组 件 。 


1. 月 份 域 


月 份 域 的 作用 是 在 输入 组 件 中 显示 年 份 和 时 
月 份 的 信息 并 提供 相关 的 步 进 按钮 ， 以 辅助 终 目 
端 用 户 选择 和 输入 年 份 与 月 份 信息 。 在 使 用 月 遇 
份 域 时 ， 需 要 开发 者 定义 输入 组 件 的 type 属性 目 
值 为 month。 开 发 者 可 以 设置 月 份 域 的 min 属 4 


性 和 max 属性 的 值 , 以 限定 月 份 域 的 选择 范围 。 


在 Dreamweaver 中 , 开发 者 可 以 在 【插入 】 
图 9-19 ,插入 
面板 【表单 ] 选项 卡 中 单 击 【月 ] 按 负 刁 2， 了 -时 呈 2 一 括 和 月份 域 
在 “设计 ”视图 中 插入 一 个 月 份 域 ， 并 设置 月 份 域 的 标签 组 件 值 ， 如 图 9-19 所 示 。 
在 插入 月 份 域 之 后 ， 开 发 者 即 可 在 【属性 】 检 查 器 中 设置 月 份 域 的 各 种 属性 ， 如 图 
9-20 所 示 。 
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图 9-20 ,月 份 域 的 属性 

在 月 份 域 的 【属性 】 检 查 器 中 ， 开 发 者 可 以 方便 地 设置 其 各 种 基本 属性 以 及 辅助 输 
入 属性 ， 如 表 9-6 所 示 。 
32 表 9-6_ 月 份 域 的 属性 


属 性 作 用 
Name 定义 月 份 域 的 名 称 〈 即 其 name 属性 ) 
Class 定义 月 份 域 的 类 值 ( 即 其 class 属性 ) 以 用 于 关联 相关 CSS 样式 表 


定义 月 份 域 值 中 的 年 份 


Wue [NE | 定 又 月 份 堪 全 中 的 月 价 

Title 定义 月 份 域 的 标题 〈 即 其 title 属性 ) 

有 选中 该 选项 则 该 月 份 域 将 被 禁止 由 用 户 直 接 编辑 和 选择 《 即 设置 其 disabled 属性 
值 为 disabled) 

Required 选中 该 选项 则 该 月 份 域 将 被 设置 为 必 填 ( 即 设置 其 required 属性 值 为 required) 
选中 该 选项 则 允许 该 月 份 域 使 用 浏览 器 的 自动 完成 功能 〈 即 设置 其 autocomplete 

Anuto Complete 属性 值 为 on) 
选中 该 选项 则 人 允许 该 月 份 域 在 页 面 加 载 时 自动 获取 焦点 ( 即 设置 其 autofocus 属性 

Anuto Focus 


值 为 autofocus) 


Read Only 选中 该 玩 项 则 该 月 份 域 将 被 设置 为 只 恋 ( 即 设置 其 readonly 属性 信 为 readonly) 
设置 该 月 份 域 允许 的 最 小 年 从 
| MM ”| 设置 该 月 份 域 允 许 的 最 小 月 份 


et 设置 该 月 份 域 允许 的 最 大 年 份 
MM 设置 该 月 份 域 允许 的 最 打 月 份 


设置 该 月 份 域 在 用 户 修改 年 份 或 月 份 时 每 修改 一 次 的 步 进 单位 。 例 如 ， 设 置 其 值 


Sp 为 2 时 ， 仅 允许 用 户 以 两 年 或 两 月 的 方式 修改 值 

Form 设置 该 月 份 域 所 属 的 表单 容器 〈 需 填 入 表单 容器 标记 FORM 的 id 属性 值 ) 

Tab Index 设置 该 月 份 域 在 页 面 的 Tab 按键 顺序 

List 设置 该 月 份 域 所 属 的 预 加 载 列表 (党 填 入 数据 列表 标记 DATALIST 的 过 属性 值 ) 
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在 设置 月 份 域 的 List 属性 时 ， 需 要 预先 在 网 页 文档 中 建立 一 个 数据 列表 标记 
DATALIST， 并 设置 该 列表 中 的 项 目 ， 以 及 列表 的 id 属性 ， 然 后 才能 将 其 引用 到 月 份 
域 中 。 

在 Opera 浏览 器 中 ， 开 发 者 可 以 方便 地 预 
览 已 经 创建 的 日 期 域 ， 在 该 日 期 域 中 ， 已 经 预 |“ © [8 meWeyoocuweWNecWovme 
置 了 年 份 、 月 份 的 选择 器 ， 并 允许 用 户 单 击 右 | 鉴 $R | 于 和 图 > 


BB 天 


侧 的 下 拉 箭 头 ， 在 弹出 的 日 期 选择 器 中 选择 指 = 
定 的 年 份 和 月 份 ， 如 图 9-21 所 示 。 Pe 


日 期 域 与 月 份 域 类 似 ， 都 是 HIML 5 新 增 
的 通过 调用 Web 浏览 器 的 日 期 选择 器 来 辅助 
终端 用 户 选 择 和 输入 时 间 日 期 的 组 件 。 在 使 用 
日 期 域 时 ， 需 要 开发 者 定义 输入 组 件 的 type 属 
性 值 为 date。 开 发 者 可 以 设置 日 期 域 的 min 属 
性 和 max 属性 的 值 ,以 限定 日 期 域 的 选择 范围。 

开发 者 可 以 在 Dreamweaver 的 【插入 】 面 
板 通过 【表单 】 选 项 卡 的 【日 期 ] 按 铠 [Gasal 
来 插入 日 期 域 ， 并 设置 与 日 期 域 相 关 的 标签 组 
件 ， 如 图 9-22 所 示 。 

日 期 域 的 【属性 】 检 查 器 与 月 份 域 的 【 属 
性 】 检 查 器 大 体 类 似 ， 唯 一 的 区 别 是 其 Value 
属性 、Max 属性 以 及 Min 属性 等 允许 设置 日 期 《了 图 9-22 日期 域 
值 ， 如 图 9-23 所 示 。 
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芋 了 图 9-23 。 日 期 域 的 【属性 】 检 查 器 


在 为 网 页 文档 插入 日 期 域 之 后 ， 开 发 者 可 以 同 
样 通过 Opera 浏览 器 来 预览 日 期 域 的 效果 ， 并 操作 


日 期 选择 器 来 选择 日 期 ， 如 图 9-24 所 示 。 [vl® 
:st 年 有 CS] 
3. 星期 域 A 学 tl: [ER 站 国 ? 
ae， 回回 加 
星期 域 也 是 HIML 5 新 增 的 输入 组 件 类 型 ， 其 区 起 压 吉本 束 二 | 
特点 是 以 某 个 年 度 的 某 个 星期 来 表示 一 个 时 间 范 人 二 全 
围 。 在 使 用 星期 域 时 ， 需 要 开发 者 定义 输入 组 件 的 人 


type 属性 值 为 week。 开 发 者 同样 可 以 设置 星期 域 的 
min 属性 和 max 属性 的 值 ， 以 限定 星期 域 的 选择 在 图 9-24 。 日 期 域 


范围 。 

在 Dreamweaver 中 的 【插入 】 面 板 【表单 】 
选项 卡 内 单 击 【 周 】 按 钮 [Sasal， 然 后 即 可 
在 网 页 文档 中 插入 星期 域 ， 并 设置 该 域 相关 的 ， 
标签 组 件 ， 如 图 9-25 所 示 。 | 

星期 域 的 【属性 】 检 查 器 与 之 前 两 种 日 期 | 
与 时 间 输 入 组 件 的 区 别 同样 在 于 其 值 、 最 大 值 [ 
和 最 小 值 范围 里 需要 设置 的 值 为 年 份 和 星期 
数 ， 如 图 9-26 所 示 。 人 图 9-25 ,插入 星期 域 


和 图 9-26_, 星 期 域 的 属性 

在 设置 完 星期 域 之 后 ， 开 发 者 即 可 通过 Opera 浏览 器 来 查看 星期 域 的 显示 效果 ， 并 
查看 可 选择 的 星期 ， 如 图 9-27 所 示 。 

4. 时 间 域 

时 间 域 的 作用 是 辅助 终端 用 户 输 入 小 时 、 分 钟 等 时 间 信 息 ， 其 也 是 HTML 5 新 增 的 


输入 组 件 类 型 ， 其 特点 是 type 属性 值 为 tme。 在 Dreamweaver 中 【插入 】 面 板 【 表 单 】 
选项 卡 中 单 击 【 时 间 ]】 按 钮 [Gaaasa， 然 后 即 可 为 网 页 文档 插入 时 间 域 ， 如 图 9-28 所 示 。 
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上 《了 图 9-27 星期 域 和 图 9-28 插入 时 间 域 


时 间 域 的 【属性 】 检 查 器 允许 开发 者 定义 初始 化 的 小 时 、 分 钟 、 秒 等 信息 值 ， 也 允许 
开发 者 定义 其 最 早 的 小 时 、 分 钟 、 秒 信息 以 及 最 晚 的 小 时 和 分 钟 、 秒 信息 ， 如 图 9-29 所 示 。 


和 图 9-29 ,时 间 域 的 属性 
在 设置 了 时 间 域 的 属性 之 后 ， 开 发 者 同样 可 以 通过 Opera 浏览 器 来 预览 该 域 的 效果 


并 对 其 进行 操作 。 与 之 前 三 种 域 不 同 ， 时 间 域 不 提供 日 期 时 间 拾 取 器 ， 而 是 提供 了 一 组 
步 进 按钮 来 设置 时 间 信息 ， 如 图 9-30 所 示 。 

5. 日 期 时 间 域 

日 期 时 间 域 是 日 期 域 和 时 间 域 的 结合 , 用 于 辅助 终端 用 户 输入 日 期 信息 和 时 间 信 息 。 
该 域 也 是 HTML 5 新 增 的 输入 域 类 型 ， 其 type 属性 值 为 datetime。 


在 Dreamweaver 的 【插入 】 面 板 【 表 单 】 选 项 卡 中 单 击 【 日 期 时 间 】 按 钮 Bawm 塌 昌 ， 
然后 即 可 插入 日 期 时 间 域 ， 如 图 9-31 所 示 。 
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和 图 9-30 ,时间 域 和 图 9-31 ,插入 日 期 时 间 域 


日 期 时 间 域 的 【属性 】 检 查 器 形 如 其 名 ， 可 定义 初始 的 日 期 时 间 值 也 可 以 定义 最 小 
或 最 大 日 期 时 间 值 ， 如 图 9-32 所 示 。 


和 图 9-32 日 期 时 间 域 的 属性 


与 之 前 4 种 日 期 与 时 间 的 输入 域 不 同 , 日 期 时 间 域 仅 被 Safari 浏览 器 支持 , 在 Safari 
浏览 器 中 ， 开 发 者 可 以 通过 一 组 步 进 按钮 来 调节 日 期 与 时 间 的 信息 ， 如 图 9-33 所 示 。 


6. 本 地 日 期 时 间 域 


本 地 日 期 时 间 域 与 日 期 时 间 域 的 区 别 在 于 ， 日 期 时 间 域 允许 用 户 选 择 时 区 ， 而 本 地 
日 期 时 间 域 只 能 根据 终端 用 户 所 在 的 时 区 来 选择 时 间 与 日 期 ， 其 同 为 HTML 5 新 增 的 输 
入 域 类 型 ，type 属性 值 为 “datetime-local”。 

在 Dreamweaver 中 的 【插入 】 面 板 【表单 】 选 项 卡 中 单 击 【 日 期 时 间 (当地) 】 按 
钮 四 NB 堪 昌 上 天 ， 然 后 即 可 插入 本 地 日 期 时 间 域 ， 如 图 9-34 所 示 。 
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和 图 9-33_, 日 期 时 间 域 和 图 9-34 ,插入 本 地 日 期 时 间 域 


本 地 日 期 时 间 域 的 【属性 】 检 查 器 设置 与 日 期 时 间 域 基本 相同 ， 如 图 9-35 所 示 。 
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和 图 9-35 ,本 地 日 期 时 间 域 的 属性 


本 地 日 期 时 间 域 被 Opera 和 Safari 等 浏览 器 支 
持 , 在 Opera 浏览 器 中 , 为 该 输入 组 件 提供 了 日 期 
拾取 器 和 时 间 步 进 按钮 组 ， 如 图 9-36 所 示 。 
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除了 日 期 与 时 间 的 相关 输入 组 件 之 外 , HTML 
5 还 为 开发 者 提供 了 一 大 批 用 于 辅助 终端 用 户 输 
入 特殊 类 型 内 容 的 输入 组 件 ， 包 括 颜色 域 、 电 子 
邮件 域 、 数 字 域 、 范 围 域 、 搜 索 域 、 电 话 号 码 域 、 
URL 域 等 。 


1. 颜色 域 


颜色 域 可 以 调用 操作 系统 的 颜色 拾取 器 ， 
帮助 终端 用 户 选择 基于 RGB 色 系 的 色彩 ， 在 
HITML 5 中 ， 设 置 输入 组 件 的 type 属性 值 为 
color 即 可 将 其 转换 为 颜色 域 。 

在 Dreamweaver 中 的 【插入 】 面 板 选择 【 表 
单 】 选 项 卡 ， 单 击 【颜色 】 按 钮 国 EEsaal， 即 
可 为 网 页 文档 插入 颜色 域 ， 并 设置 其 相关 标签 
组 件 的 文本 内 容 ， 如 图 9-37 所 示 。 

颜色 域 与 其 他 输入 组 件 的 【属性 】 检 查 器 
区 别 在 于 ， 其 提供 一 个 颜色 拾取 器 按钮 ， 允 许 人 图 9-37 插入 颜色 域 
开发 者 预先 定义 一 个 初始 化 的 颜色 ， 如 图 9-38 所 示 。 


和 图 9-36 ,本 地 日 期 时 间 域 
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DD 图 9-38 


颜色 域 被 Firefox 和 Opera 等 Web 浏览 器 直接 支持 ， 以 Opera 浏览 器 为 例 ， 用 户 可 
以 直接 单 击 颜色 域 的 按钮 ,然后 调用 操作 系统 的 颜色 拾取 器 对 话 框 来 选择 颜色 , 如 图 9-39 
所 示 。 
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2. 电子 邮件 域 


电子 邮件 域 的 作用 是 验证 终端 用 户 输入 的 文本 内 容 ， 当 其 为 合法 电子 邮件 地 址 值 时 
允许 其 提交 ， 否 则 弹出 错误 的 提示 信息 。 电 子 邮 件 域 也 是 一 种 HIML 5 新 增 的 输入 组 件 
类 型 ， 其 type 属性 值 为 email。 电 子 邮 件 域 必须 和 提交 表单 的 按钮 结合 使 用 ， 在 提交 表 
单 按钮 被 鼠标 单 击 时 ，Web 浏览 器 会 自动 验证 电子 邮件 域 中 的 文本 内 容 是 否 符合 验证 条 
件 ， 如 符合 ， 将 直接 提交 表单 ， 否 则 将 弹出 提示 。 

在 Dreamweaver 的 【插入 】 面 板 【 表 单 】 选 项 卡 中 ， 开 发 者 可 以 直接 单 击 【 电 子 邮 
件 】 按 钮 [Eda， 然 后 即 可 为 网 页 文档 插入 电子 邮件 域 ， 如 图 9-40 所 示 。 
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和 图 9-39 ,颜色 域 和 图 9-40_, 插 入 电子 邮件 域 
电子 邮件 域 的 【属性 】 检 查 器 允许 开发 者 定义 一 些 独特 的 电子 邮件 验证 功能 ， 如 图 


9-41 所 示 。 
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和 图 9-41 ,电子 邮件 域 的 属性 


在 电子 邮件 域 的 【属性 】 检 查 器 中 ， 除 了 可 以 定义 输入 组 件 的 通用 属性 外 ， 还 允许 
开发 者 定义 以 下 属性 ， 如 表 9-7 所 示 。 
2323 表 9-7_。 电 子 邮 件 域 的 特有 属性 


在 插入 电子 邮件 域 之 后 ， 开 发 者 还 需要 为 表单 容器 插入 一 个 提交 按钮 或 提交 域 ， 以 
实现 完整 的 表单 提交 功能 。 在 添加 了 提交 按钮 或 提交 域 之 后 ， 即 可 在 Web 浏览 器 中 查看 


电子 邮件 域 的 效果 并 测试 验证 功能 ， 如 图 9-42 所 示 。 


3. 数字 域 


数字 域 的 作用 是 为 终端 用 户 提供 一 个 输入 指定 整数 数值 的 输入 域 ， 并 为 用 户 提供 一 
组 步 进 按钮 以 帮助 用 户 调节 输入 的 值 幅度 。 数 字 域 是 HTML 5 新 增 的 输入 组 件 类 型 ， 其 
type 属性 值 为 number。 

在 Dreamweaver 中 的 【插入 】 面 板 内 【表单 】 选 项 卡 中 单 击 【数字 】 按 钮 男 BE 和 |， 
然后 即 可 在 网 页 文档 中 插入 数字 域 ， 如 图 9-43 所 示 。 
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点 了 图 9-42 ,电子 邮件 域 和 图 9-43 ,插入 数字 域 
数字 域 的 【属性 】 检 查 器 设置 与 普通 输入 域 大 体 类 似 ， 如 图 9-44 所 示 。 


和 图 9-44 ,数字 域 的 属性 


数字 域 是 HTML 5 新 增 的 输入 组 件 类 型 中 被 广泛 支持 的 , 几乎 所 有 Web 浏览 器 的 较 
新 版 本 都 支持 数字 域 。 仍 以 Opera 浏览 器 为 例 , 在 该 浏览 器 中 当 用 户 鼠 标 滑 过 数字 域 时 ， 
浏览 器 会 为 数字 域 显示 一 组 步 进 按钮 ， 允 许 用户 单 击 上 行 或 下 行 步 进 按钮 来 增加 或 减少 
数字 的 值 〈 有 具体 减少 的 数量 与 数字 域 的 step 属性 幅度 有 关 ) ， 如 图 9-45 所 示 。 


4. 范围 域 


范围 域 的 作用 是 显示 一 个 可 调节 的 滑 块 , 并 允许 开发 者 定义 一 个 值 的 范围 以 及 幅度 ， 
然后 辅助 终端 用 户 调节 该 滑 块 ， 确 定 指定 范围 内 的 值 。 范 围 域 也 是 HTML 5 新 增 的 输入 
组 件 类 型 ， 常 用 于 打分 类 的 应 用 。 

在 Dreamweaver 中 的 【插入 】 面 板 内 选择 【表单 】 选 项 卡 ， 然 后 即 可 单 击 【范围 】 
按钮 [BE 班 吕 ， 在 网 页 文档 中 插入 一 个 范围 域 ， 如 图 9-46 所 示 。 
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和 图 9-45 ,数字 域 和 图 9-46 ,插入 范围 域 


在 使 用 范围 域 时 ， 开 发 者 应 在 【属性 】 检 查 器 中 定义 其 范围 的 最 大 值 (Max) 、 最 
小 值 (Min) 以 及 初始 值 (Value) 和 步 进 幅度 〈Step) ， 然 后 范围 域 才能 正常 地 工作 。 
例如 ， 设 置 范围 域 的 最 小 值 为 0， 最 大 值 为 5， 初 始 值 为 3， 步 进 幅度 为 1， 如 图 9-47 
所 示 。 
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和 图 9-47 设置 范围 域 属性 
在 实际 的 使 用 中 ， 开 发 者 可 以 通过 一 小 段 脚 本 来 对 范围 域 进行 修改 ， 使 之 能 够 将 值 


“score drag”， 为 其 添加 onchange 属性 ， 设 置 属性 值 为 “writescore(this.value)”， 然 后 
再 创建 一 个 文本 域 ， 设 置 其 属性 ， 代 码 如 下 。 


<input type="text" readonly="readonly" id="score value" value="3"> 


然后 ,在 网 页 的 文档 头 标记 HEAD 中 添加 一 段 简 单 的 JavaScript 脚本 , 定义 writescore 
函数 ， 即 时 输出 分 值 ， 代 码 如 下 。 


<script type="text/javascript"> 
function writescore ( text ){ 

document .getElementById('score value') .value=text; 
} 


</script> 

然后 ， 即 可 在 济 览 关中 拖 外 范围 域 ， 并 查看 范围 pg 
域 当前 设置 的 值 ， 如 图 9-48 所 示 。 ee 7 

5. 搜索 域 全 (只 到 加) : 9 一 所] 


搜索 域 通常 用 于 站 点 内 搜索 或 引用 外 部 指定 的 搜 
索引 擎 。 在 HTML 5 中 ,搜索 域 类 型 的 输入 组 件 其 type 
属性 值 为 search。 在 Dreamweaver 中 插入 搜索 域 ， 可 
在 【插入 】 面 板 【 表 单 】 选 项 卡 中 单 击 【 搜 索 】 按 钮 和 图 9-48 ,范围 域 


EEEs， 如 图 9-49 所 示 。 

搜索 域 的 使 用 方式 以 及 在 Web 浏览 器 中 的 显示 效果 与 普通 文本 域 基本 相同 , HTML 
5 添加 此 类 型 的 输入 组 件 更 多 地 是 基于 语义 化 的 Web 分 析 而 使 用 ， 以 将 其 与 普通 输入 组 
件 区 分 开 来 ， 其 属性 设置 和 浏览 效果 在 此 将 不 再 獒 述 。 


6. 电话 号 码 域 


电话 号 码 域 用 于 辅助 终端 用 户 输入 美国 电话 号 码 格式 的 数据 ， 在 HIML 5 中 ， 电 话 
号 码 域 类 型 的 输入 组 件 type 属性 值 为 tel。 在 Dreamweaver 中 插入 电话 号 码 域 , 可 在 【 插 
入 】 面 板 【 表 单 】 选 项 卡 中 单 击 【Tel】 按 钮 EEsaaa， 然 后 即 可 插入 一 个 电话 号 码 域 ， 
如 图 9-50 所 示 。 


点 图 9-49 插入 搜索 域 和 图 9-50 ,插入 电话 号 码 域 


电话 号 码 域 的 【属性 】 检 查 器 与 普通 文本 域 基本 相同 ， 由 于 其 仪 支持 用 于 验证 美国 
电话 号 码 ， 同 时 也 只 被 iPhone 自 带 的 Safari 8 浏览 器 支持 ， 因 此 在 实际 应 用 中 很 少 有 开 
发 者 使 用 。 通常 只 有 专门 针对 IOS 开发 的 基于 HIML 5 架构 的 应 用 程序 使 用 这 一 类 输入 
组 件 。 


7. URL 域 


URL 域 的 作用 是 验证 终端 用 户 输入 的 URL 地 址 ,如 终端 用 户 输入 的 URL 地 址 符合 
URL 格式 , 则 在 提交 表单 容器 时 多 许 提交 此 域 ，_。 
的 内 容 ， 否 则 弹出 提示 ， 并 终止 表单 容器 的 提 | [这 
交 操作 。URL 域 是 HTML 5 为 URL 地 址 类 数 
据 提供 的 一 种 特殊 输入 组 件 类 型 ,其 type 属性 
值 为 url。 

在 Dreamweaver 中 的 【插入 】 面 板 中 选择 
【表单 】 选 项 卡 ， 然 后 即 可 单 击 【Ud 按钮 
Ei， 为 网 页 文档 插入 一 个 URL 域 ， 如 图 
9-51 所 示 。 

URL 域 的 【属性 ] 检查 器 与 普通 的 文本 域 和 图 9。 插入 URL 域 
相同 ， 该 输入 组 件 被 除 Safari 以 外 其 他 所 有 主流 Web 浏览 器 支持 ， 以 Opera 为 例 ， 结 合 
提交 按钮 ， 开 发 者 可 以 方便 地 限定 终端 用 户 输入 URL 格式 的 内 容 ， 如 图 9-52 所 示 。 


网 
页 
设 
计 
已 
网 
站 
建 
设 
Q 
C) 
中 
文 
已 
标 


9.4 ”列表 菜单 组 件 FE 


4 3 CC Bfie///D/Untited-Shtml 
列表 菜单 组 件 的 作用 是 为 终端 用 户 提供 | 人 二: 7 ] 国 到 
一 个 列表 框 或 弹出 菜单 ， 允 许 终端 用 户 从 中 选 


择 若干 列表 菜单 项 目 。 最 终 ， 在 表单 容器 提交 
时 ， 可 将 这 些 被 用 户 选中 的 列表 菜单 项 目 值 提 
交 到 服务 器 中 。 

HTML 5 提供 了 两 种 列表 菜单 组 件 ， 一 种 
是 用 于 选择 的 显 式 列表 菜单 组 件 ， 另 一 种 则 是 和 图 9-52 。URL 域 
隐 式 的 辅助 输入 组 件 调用 的 数据 列表 组 件 。 前 一 种 可 在 Dreamweaver 中 直接 以 可 视 化 的 
方式 创建 ， 而 后 一 种 则 需要 开发 者 以 代码 输入 的 方式 来 编写 。 


显 式 列表 菜单 是 HTML 5 从 XHTML 1.0 结构 语言 中 继承 而 来 的 一 种 组 件 ， 其 通过 
列表 菜单 标记 SELECT、 菜 单项 目标 记 OPTION 和 菜单 项 目 组 标记 OPTGROUP 定义 。 

在 列表 菜单 中 ， 列 表 菜 单 标 记 SELECT 可 以 直接 包含 若干 菜单 项 目标 记 OPTION， 
也 可 以 包含 若干 菜单 项 目 组 标记 OPTGROUP, 每 个 菜单 项 目 组 标记 OPTGROUP 下 再 包 
含 若干 菜单 项 目标 记 OPTION。 


1. 列表 菜单 标记 


列表 菜单 标记 (SELECT) 通过 size 属性 定义 其 显示 效果 ， 当 size 属性 被 省 略 或 其 
属性 值 为 1 时 ， 列 表 菜 单 被 Web 浏览 器 显示 为 弹出 式 的 下 拉 菜 单 ，size 属性 值 为 大 于 1 
的 整数 时 ， 列 表 菜 单 被 显示 为 多 行 的 内 嵌 列 表 ， 通 过 滚动 条 上 下 拖 电 显示 菜单 的 完整 
内 容 。 

HIML 5 结构 语言 允许 开发 者 定义 列表 菜单 标记 SELECT 的 以 下 几 种 属性 ,如 表 9-8 
所 示 。 

S23 _ 表 9-8 _。 列表 菜单 标记 SELECT 的 属性 


定义 此 组 件 在 页 面 加 载 时 自动 获得 焦点 (每 个 页 面 中 只 能 有 一 个 组 
件 具 有 此 属性 ， 否 则 将 只 有 第 一 个 具有 此 属性 的 组 件 有 效 ) 


定义 该 组 件 所 属 的 表单 容器 id 属性 值 

允许 终端 用 户 同时 选择 该 组 件 内 多 个 项 目 

定义 该 组 件 的 名 称 

定义 该 组 件 为 必 选 项 目 

定义 该 组 件 可 直接 显示 的 项 目 数 ， 当 其 值 为 1 时 显示 为 下 拉 菜 单 ， 
而 当 其 值 大 于 1 时 则 被 显示 为 列表 框 


在 下 面 的 代码 中 ， 就 对 两 个 内 容 一 致 的 列表 菜单 定义 了 不 同 的 size 属性 值 ， 使 其 


各 


示 效 果 截 然 不 同 ， 代 码 如 下 。 


2. 菜单 项 的 分 组 


菜单 项 目 组 标记 (OPTGROUP) 的 作用 是 对 菜单 项 进行 分 组 ， 使 菜单 项 的 显示 更 加 


富有 条 理 。 除 此 之 外 ， 还 可 以 对 菜单 项 进行 批量 的 禁用 或 提供 描述 。 菜 单项 组 标记 仅 能 
作为 选择 菜单 标记 (SELECT) 的 子 集 ， 以 及 菜单 项 目标 记 (OPTION) 的 父 集 存在 。 


在 下 面 的 代码 中 ， 就 通过 菜单 项 目 组 标记 (OPTGROUP) 定义 了 一 个 分 组 显示 的 列 
表 菜 单 ， 代 码 如 下 。 


通常 情况 下 ，Web 浏览 器 会 对 菜单 项 目 分 组 的 标题 加 粗 项 格 显示 ， 并 对 被 分 组 的 菜 
单项 目 缩 进 显 示 。 
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3. 插入 列表 菜单 


在 Dreamweaver 中 ， 开 发 者 可 以 在 【插入 】 | 
面板 的 【表单 】 选 项 卡 内 单 击 【选择 】 按 钮 ， 
[EL， 为 网 页 文档 插入 列表 菜单 ， 如 图 9-53 
所 示 。 

Dreamweaver 提供 了 可 视 化 的 方式 辅助 开发 
者 定义 列表 菜单 的 属性 ， 并 管理 列表 菜单 中 的 项 


目 ， 如 图 9-54 所 示 。 


和 图 9-54 ,列表 菜单 的 属性 


在 列表 菜单 的 【属性 】 检 查 嚣 中， 提供 了 一 个 
Selected 属性 ， 用 于 显示 当前 已 经 为 列表 菜单 添加 的 列 
表 项 目 , 以 及 这 些 项 目的 初始 化 选择 状态 。 开 发 者 可 以 
单 击 【列表 值 …】 按 钮 [贡生 ]， 在 弹出 的 【列表 
值 】 对 话 框 中 创建 列表 项 目 ， 如 图 9-55 所 示 。 


2 一 数据 列表 组 件 - - 发 了 图 9-55_。[【 列 表 值 】 对 话 框 
TY UL 


数据 列表 组 件 是 HTML 5 新 增 的 菜单 列表 组 件 ， 其 是 一 种 隐藏 的 组 件 ， 并 不 会 直接 
在 Web 浏览 器 中 显示 ， 而 是 作为 数据 源 ， 供 其 他 输入 组 件 来 调用 。 

在 定义 数据 列表 组 件 时 ， 需 要 使 用 到 数据 列表 标记 DATALIST。 数 据 列表 标记 
DATALIST 的 结构 与 列表 菜单 标记 SELECT 类 似 , 都 需要 通过 菜单 项 目标 记 OPTION 来 
定义 列表 中 的 项 目 ， 但 是 不 支持 对 项 目 进行 分 组 。 

例如 ， 定 义 一 个 基本 的 数据 列表 组 件 ， 并 创建 一 些 软件 名 称 的 项 目 ， 代 码 如 下 。 


<datalist id="adobe soft"> 
<option>Dreamweaver</option> 
<option>Photoshop</option> 
<option>Flash Professional</option> 
<option>Illustrator</option> 
</datalist> 


在 定义 了 以 上 代码 之 后 ， 开 发 者 即 可 再 定义 一 个 基本 的 文本 域 输入 组 件 ， 通 过 该 输 
入 组 件 调用 此 数据 列表 组 件 ， 代 码 如 下 。 
<labe1> 请 选择 您 擅长 的 软件 ，</label> 


<input type="text" id="select soft" list="adobe soft"> 


数据 列表 组 件 属于 支持 性 较 好 的 HTML 5 
结构 标记 之 一 , 几乎 所 有 主流 Web 浏览 器 的 较 性 = 
新 版 本 都 支持 此 组 件 ， 允 许 开发 者 将 其 应 用 到 | + > ec 下 四 mnnasesnm 


输入 组 件 中 ， 如 图 9-56 所 示 。 人 

数据 列表 组 件 通常 用 于 为 输入 组 件 提供 输 
入 的 自动 完成 提示 ， 在 搜索 类 的 网 页 中 应 用 较 
为 广泛 。 使 用 数据 列表 组 件 有 助 于 开发 者 快速 


实现 个 性 化 的 提示 信息 。 
9.5 ”其 他 组 件 | 4 图 9-56 ,数据 列表 效果 


除了 以 上 介绍 的 几 种 组 件 外 ， 开 发 者 还 可 以 通过 Dreamweaver 创建 按钮 组 件 、 文 本 
区 域 等 组 件 。 


按钮 组 件 主要 用 于 捕获 终端 用 户 鼠 标 单 击 操作 ,以 实现 提交 、 重 置 等 表单 容器 行为 ， 
或 以 JavaScript 脚本 语言 定义 的 一 些 自 定义 行为 .HTML 5 结构 语言 允许 开发 者 使 用 输入 
组 件 创建 4 种 类 型 的 输入 按钮 ， 分 别 为 提交 域 、 重 置 域 、 按 钮 域 以 及 图 像 域 。 这 4 种 类 
型 的 按钮 都 可 以 被 Dreamweaver 以 可 视 化 的 方式 创建 。 


1. 提交 域 


提交 域 又 被 称 作 提交 按钮 ， 其 作用 是 捕获 
用 户 鼠 标的 单 击 操作 ， 将 指定 的 表单 容器 内 所 时 
有 表单 组 件 采集 的 数据 提交 给 服务 器 。HTMIL 村 
5 结构 语言 定义 当 输 入 组 件 的 type 属性 值 为 
submit 时 ， 该 输入 组 件 就 以 提交 域 的 方式 显示 
和 应 用 。 

在 Dreamweaver 中 ， 开 发 者 可 以 单 击 【 插 
入 】 面 板 内 【表单 】 选 项 卡 中 的 【“ 提 交 ” 按 

上 页 文档 创建 一 个 

ee 为 网 页 文档 创建 一 个 提 人 

提交 域 的 【属性 】 检 查 器 包含 了 完整 的 按钮 属性 设置 以 及 相关 表单 提交 的 表单 属性 ， 
如 图 9-58 所 示 。 


和 图 9-58 ,提交 域 的 属性 


山 吕 次 


使 
用 
表 
单 


开发 者 可 以 在 【属性 】 检 查 器 中 修改 其 Value 属性 ， 以 更 改 按钮 中 的 显示 文本 。 其 
他 关于 提交 域 的 【属性 】 检 查 器 中 各 表单 属性 的 设置 ， 开 发 者 可 参考 之 前 相关 小 节 内 输 
入 组 件 的 表单 属性 内 容 ， 由 于 篇 幅 的 限制 ， 在 此 将 不 再 獒 述 。 


2. 重 置 域 


重 置 域 又 被 称 作 重 置 按 钮 ， 其 作用 是 将 指 
定 表单 内 所 有 终端 用 户 填 写 或 更 改 的 组 件 内 容 
清除 ， 将 这 些 组 件 的 内 容 和 状态 恢复 为 初始 化 
页 面 时 的 内 容 和 状态 。HTML 5 结构 语言 定义 
当 输 入 组 件 的 type 属性 值 为 reset 时 , 该 输入 组 
件 就 以 重 置 域 的 方式 显示 和 应 用 。 

在 Dreamweaver 中 ， 开 发 者 可 以 通过 【 插 
入 】 面 板 内 的 【表单 】 选 项 卡 中 【“ 重 置 ” 按 
钮 】 按 钮 四 sa 因 来 创建 重 置 域 ， 如 图 9-59 


| 习 


半 小 ， 


本 


所 示 和 图 9-59_, 插 入 重 置 域 


重 置 域 的 【属性 】 检 查 器 较为 简单 ， 开 发 者 可 以 通过 其 Value 属性 来 设置 重 置 域 的 
按钮 显示 文本 ， 如 图 9-60 所 示 。 


沪 隐 基 习 


99) 


ET 


| FE | | 
和 图 9-60 , 重 置 域 的 属性 


3. 按钮 域 


按钮 域 的 作用 是 捕获 终端 用 户 的 鼠标 单 击 操作 , 立即 执行 开发 者 自 定义 的 交互 行为 ， 
诸如 调用 一 段 脚本 代码 ， 或 向 服务 器 传递 一 些 特殊 的 数据 等 。HTML 5 结构 语言 定义 当 
输入 组 件 的 type 属性 值 为 button 时 , 该 输入 组 
件 就 以 按钮 域 的 方式 显示 和 应 用 。 

在 Dreamweaver 中 ， 开 发 者 可 以 通过 【 插 
入 】 面 板 内 的 【表单 】 选 项 卡 中 【按钮 】 按 钮 
[EEaiiaial 来 为 网 页 文档 插入 一 个 按钮 域 ， 如 图 
9-61 所 示 。 

按钮 域 的 【属性 】 检 查 器 设置 与 重 置 域 大 
体 相 同 ， 在 使 用 按钮 域 时 ， 需 要 开发 者 通过 代 


码 来 为 其 绑 定 相关 的 行为 或 事件 ， 出 于 篇 幅 的 Tk 
限制 ， 在 此 将 不 再 更 述 。 和 图 9-61 插入 按钮 域 


4. 图 像 域 
图 像 域 又 被 称 作 图 像 按钮 ， 其 可 以 允许 开发 者 将 一 幅 图 片 插入 网 页 文档 中 ， 并 起 到 


标 


提交 域 的 相同 作用 。 在 HIML 5 结构 语言 中 ， 
当 输 入 组 件 的 type 属性 值 为 image 时 ， 该 输入 站 人 
组 件 就 以 图 像 域 的 方式 供 开发 者 调用 。 有 

在 Dreamweaver 中 ， 开 发 者 可 在 【插入 】 上 
面板 的 【表单 】 选 项 卡 中 单 击 【 图 像 按钮 按 
钮 嫩 | 欧 生 四 ， 在 弹出 的 对 话 框 中 从 本 地 或 站 点 ¥ 
中 选择 按钮 图 像 之 后 ， 即 可 为 网 页 文档 插入 图 
像 域 ， 如 图 9-62 所 示 。 

图 像 域 与 提交 域 在 实际 作用 上 相同 ， 但 其 
【属性 检查 器 要 比 提交 域 多 一 些 与 图 像 域 相关 ”人 图 62 。 插 入 图 像 域 
的 内 容 ， 诸 如 图 像 的 URL (Src) 、 提 示 信 息 (Alt) 、 宽 度 (Width) 、 高 度 (Height) 
等 ， 如 图 9-63 所 示 。 


《了 图 9-63 ,图 像 域 的 属性 
另外 ， 开 发 者 可 在 【属性 】 检 查 器 中 单 击 【编辑 图 像 】 按 钮 [编辑 图 像 |]， 调 用 对 应 的 


图 像 编辑 程序 (如 Adobe Photoshop、Adobe Fireworks 等 ) 来 直接 编辑 图 像 域 的 源 图 像 。 


文本 区 域 组 件 的 作用 是 获取 用 户 输入 的 大 量 文本 内 容 ， 并 将 其 提交 到 服务 器 中 。 相 
比 输入 组 件 中 的 文本 域 ， 文 本 区 域 组 件 可 以 由 开发 者 通过 CSS 样式 表 来 定义 尺寸 ， 以 承 
载 多 行 的 文本 内 容 。 

1. 文本 区 域 标记 


文本 区 域 标记 TEXTAREA 是 一 种 HTML 5 结构 语言 由 XHTML 结构 语言 继承 而 来 
的 表单 组 件 标记 ， 其 本 身 可 以 容纳 几乎 无 限 数量 的 文本 内 容 。 在 默认 情况 下 ， 文 本 区 域 
标记 内 的 文本 在 Web 浏览 器 中 以 等 宽 字体 来 显示 。 

HTML 5 结构 语言 在 XHTML 结构 语言 基础 上 扩展 了 文本 区 域 标记 TEXTAREA, 允 
许 开发 者 为 其 定义 以 下 几 种 属性 ， 如 表 9-9 所 示 。 
355 表 9-9 文本 区 域 标记 TEXTAREA 的 属性 


定义 此 组 件 在 页 面 加 载 时 自动 获得 焦点 (每 个 页 面 中 只 能 有 一 个 组 


ml uutofoons 件 具 有 此 属性 ， 否 则 将 只 有 第 一 个 具有 此 属性 的 组 件 有 效 
cols 整数 定义 此 组 件 可 直接 显示 的 列 数 〈 以 字符 宽度 来 衡量 的 组 件 宽度 ) 
disabled disabled 定义 此 组 件 默认 处 于 被 禁用 状态 (禁止 被 用 户 修改 ) 


表单 


定义 此 组 件 具 有 绑 定 关系 的 表单 容器 的 id 属性 值 
定义 输入 文本 的 最 大 长 度 


form 
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续 表 


值 
| 文本 
Tequired 


整数 
hard 
soft 


定义 此 组 件 的 名 称 
定义 辅助 用 户 填写 输入 内 容 时 的 提示 
定义 此 组 件 处 于 只 读 状 态 

定义 此 组 件 处 于 只 读 状 态 

定义 此 组 件 可 直接 显示 的 行 数 〈 以 字符 行 高 来 衡量 的 组 件 高 度 ) 
默认 值 , 定义 此 组 件 内 的 文本 以 不 换行 的 方式 提交 (不 提交 换行 符 ) 
定义 此 组 件 内 的 文本 以 换行 的 方式 提交 连同 换行 符 一 并 提交 》 


在 默认 情况 下 ， 文 本 区 域 标记 不 限制 输入 的 文本 数量 ， 也 不 会 限制 输入 的 行 数 。 
发 者 可 以 通过 其 cols 属性 和 rows 属性 直接 定义 文本 区 域 标记 能 够 直接 显示 的 列 数 和 行 
数 ， 或 通过 CSS 样式 表 定 义 文本 区 域 标记 精确 的 宽度 和 高 度 〈 推 荐 采用 后 一 种 方式 ， 可 
以 更 精准 地 控制 其 尺寸 ， 而 与 页 面 设置 的 字体 尺寸 和 行 高 尺寸 无 关 ) 。 

在 下 面 的 代码 中 ， 就 简单 定义 了 一 个 包含 默认 值 的 文本 字段 标记 ， 代 码 如 下 。 


<textared rows="3" cols="20"> 
请 在 此 处 输入 您 的 简介 。 


</textarea> 


需要 注意 的 是 ， 由 于 文本 字段 标记 是 通过 其 起 始 标 记 和 结束 标记 之 间 的 内 联 文本 作 


为 其 提交 服务 器 的 数据 内 容 ,因此 在 将 其 数据 提交 服务 儿 
器 时 ， 应 随时 注意 去 除数 据 两 侧 的 多 余 空 i = 
2. 使 用 文本 区 域 
| 

在 Dreamweaver 中 ， 开 发 者 可 以 在 【插入 】 面板 的 是 i 

【表单 】 选 项 卡 中 单 击 【 文 本 区 域 】 按 钮 加 lse 二 ,在 二 SR 


网 页 文档 中 创建 一 个 文本 区 域 ， 如 图 9-64 所 示 。 


选中 文本 区 域 后 ， 开 发 者 即 可 在 【属性 】 检 查 器 中 了 图 9-64 。 插 入 文本 区 域 
以 可 视 化 的 方式 设置 文本 区 域 的 属性 ， 如 图 9-65 所 示 。 


和 图 9-65 ,文本 区 域 的 属性 


文本 区 域 的 【属性 】 检 查 器 只 不 过 将 文本 区 域 标记 TEXTAREA 的 各 种 HTML 属性 
以 可 视 化 的 方式 展示 出 来 ， 开 发 者 可 以 参考 之 前 小 节 介绍 的 文本 区 域 标记 TEXTAREA 
各 种 属性 ， 以 在 此 处 设置 文本 区 域 的 属性 。 


9.6 课堂 练习 : 制作 用 户 登 录 页 面 


在 了 解 Dreamweaver 的 表单 和 各 种 表单 组 件 后 ， 用 户 可 以 使 用 【插入 】 面 板 ， 在 网 


页 文档 中 插入 表单 组 件 ， 并 通过 CSS 样式 定义 表单 的 显示 属性 。 在 本 练习 中 ， 就 将 使 用 


以 上 技巧 ， 设 计 一 个 用 户 登 录 页 面 ， 如 图 9 


-66 所 示 。 


ee 


ol 年 6 有 9 日 呈 期 二 103642 


用 户 痘 录 


和 的 其 版 要 有 原作 者 所 有 ~ 
如 者 同意 ， 将 本 沾 光 3 业 用 奸 或 转载， 
作者 同意， 闪光 着 丙肝 芝 各 人 


和 图 9-66 用户 登录 界面 


操作 步骤 : 

在 Dreamweaver 中 , 执行 [文件 ]1[ 打开 】 
命令 , 打 的 素材 文件 , 将 鼠标 光标 置 于 预 留 
的 列表 项 目 区 域 中 ， 如 图 9-67 所 示 。 
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9-67 选中 表单 区 域 


执行 【插入 】 |【 表单 ] |【 表单】 命令 , 为 
选中 的 网 页 元 素 中 插入 一 个 表单 ,并 在 【 属 
性 】 面 板 中 设置 其 【ID ] 为 form1，【 动作]】 
为 “javascript:void(null);”， 如 图 9-68 
所 示 。 
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在 此 于 为 证 站 提 代 资源 和 素 村 的 各 位 作者 台山 训 心 的 感谢 。 
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和 图 9-68_, 插 入 表单 并 设置 属性 


执行 【插入 】1[【 HTML 】1[【 文 本 对 象 }1【 段 
落 ] 命令 ,在 表单 中 插入 段落 。 然 后 再 执行 
【插入 】1[【 表单 ] |【 文本 域 ] 命令 ,在 弹出 
的 【插入 标签 辅助 功能 属性 】 对 话 框 中 设置 
ID 为 userName， 如 图 9-69 所 示 。 

按 【 回 车 】 键 ,然后 再 插入 一 个 ID 为 
userPassword 的 文本 域 ， 并 在 【 属性 ] 面 
板 中 设置 其 为 [ 密码 ] 选 项, 如 图 9-70 所 示 。 


出 的 【插入 标签 辅助 功能 属性 ] 对 话 框 中 设 
置 ID 为 login。 然 后 ， 单 击 【 确定 】 按钮 ， 
在 【 属性 】 面板 中 设置 按钮 的 【 值 ] 为 “ 登 
录 ”"， 如 图 9-72 所 示 。 


样式 〇 用 标 答 标 记 环 绾 
| 代用 “far” 性 附 0 标 莹 标记 


箱 四 医 录 ” |] ”动作 (提交 胡 单 中 口 无 中 
品 王 表单 四 ) 


和 图 9-72 插入 登录 按钮 

在 【登录 】 按钮 右 侧 按 Ctrl+Shift+ 空 格 键 ， 
插入 一 个 全 角 空 格 ， 然 后 再 插入 一 个 ID 为 
reset 的 按钮 , 设置 其 [ 值 ] 为 “ 重 置 ";【 动 
作 ] 为 【 重 设 表单 ] 即 可 完成 表单 的 插入 ， 
如 图 9-73 所 示 。 


0 插入 密码 域 Ni > |, | J pr 
中 ] 1 四 
用 同样 的 方式 ,依次 插入 ID 为 checkCode、 | 


secureQuestion 和 secureAnswer 的 文本 
域 ， 作 为 填 入 验证 码 、 登 录 安 全 问题 和 安全 
问题 答案 的 文本 域 ， 如 图 9-71 所 示 。 
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9-73 ,插入 重 置 按钮 


图 在 表单 中 任意 一 个 文本 域 或 按钮 右 侧 , 单 击 
鼠标 光标 ， 然 后 即 可 在 【 CSS 】 面 板 中 单 击 
【 新建 CSS 规则 】 按钮 回 , 在 弹出 的 【 新建 
CSS 规则 】 对话 框 中 ， 单 击 【 确定 】 按钮， 


0657 
创建 CSS 规则 ， 如 图 9-74 所 示 。 
和 图 9-71 ,插入 其 他 文本 域 
图 在 弹出 的 【CSS 规则 定义 】 对 话 框 中 , 选择 
图 在 secureAnswer 文 本 域 右 侧 按 回 车 , 再 执 【 方 框 ] 的 列表 项 ， 对 段落 的 样式 进行 设置 ， 
行 【插入 】 |【 表单 ] |【 按钮 ] 命令 ， 在 弹 如 图 9-75 所 示 。 
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上 了 图 9-75 ,设置 CSS 样式 


在 【CSS 】 面板 中 单 击 【 新建 CSS 规则 】 
按钮 加， 在 弹出 的 【 新 建 CSS 规则 】 对 话 
框 中 设置 【 选择 器 类 型 】 为 “复合 内 容 ”， 
设置 【选择 器 名 称 】 为 “#mainFrame 
#IloginBox #loginBoxList #InputFieldBox 
#form2 .inputBox”， 并 单 击 【 确定 ]， 如 图 
9-76 所 示 。 


为 co 规则 和 加 上 下 文 过 把 入 到 
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选择 加 名称 - 
选择 式 入 
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TE 证 


规则 定 久 : 
四 择 定 久久 由 的 位 轩 。 


和 图 9-76 ,新 建 CSS 规则 
在 弹出 的 CSS 规则 定义 导 话 框 中 选择 ( 方 


框 】 列表 项 目 ， 然 后 设置 【 Width 】 为 200， 
如 图 9-77 所 示 。 
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人 图 9-77 ,设置 表单 宽度 


返回 [ 设计 视图 】, 分 别 选 中 ID 为 userName， 
UserPassword，secureQuestion 和 secure- 
Answer 的 文本 域 ， 在 【 属性 】 面 板 中 为 其 
应 用 类 为 inputBox， 如 图 9-78 所 示 。 
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和 图 9-78_ ,设置 表单 组 件 的 类 


选中 ID 为 checkCode 的 文本 域 , 在 [ CSS 】 
面板 中 单 击 【 新 建 CSS 规则 】 按钮 回 ， 在 
弹出 的 【 新 建 CSS 规则 ] 对 话 框 中 设置 [ 选 
择 器 类 型 ] 为 “复合 内 容 "， 设 置 【 选择 器 
名 称 】 为 “ #mainFrame #loginBox 
#IloginBoxList #InputFieldBox #form2 p 
#checkCode”, 并 单 击 【 确定 】 如 图 9-79 
所 示 。 

选择 【区 块 】 列表 项 目 ， 设 置 【 Display 】 
为 inline， 然 后 选择 【 方 框 】 列表 项 目 , 设 
置 【Width 】 为 “90”"， 如 图 9-80 所 示 。 
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局 淋 注 党 


固 在 名 为 checkCode 的 对 话 框 右 侧 ， 按 
Ctrl+Shift+ 空 格 键 ， 插 入 4 个 全 角 空格 。 然 
后 , 在 全 角 空 格 右 侧 插入 验证 码 的 图 像 ， 如 
图 9-81 所 示 。 
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和 图 9-81 ,插入 验证 码 图 像 


设计 用 户 注册 页 面 时 ， 不 仅 需 要 使 用 文本 字段 和 按钮 等 表单 对 象 ， 还 需要 使 用 到 项 
目 列表 等 表格 对 象 ， 可 以 供用 户 在 页 面 中 进行 选择 选项 。 同 时 ， 用 户 还 需要 使 用 文本 域 
的 组 件 ， 获 取 输 入 的 大 量 文本 ， 用 于 获取 注册 个 人 的 信息 ， 如 图 9-82 所 示 。 
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上 了 图 9-82 ,注册 页 面 
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操作 步骤 : 


打开 素材 “index.html” 页 面 ， 将 光标 置 于 按钮 ， 为 其 插入 一 个 表单 容器 ， 如 图 9-86 
ID 为 registerBG 的 Div 层 中 , 单 击 【插入 】 所 示 。 选 择 表单 容器 ,在 【 属性 】 检查 器 中 
面板 【常用 】 选项 中 的 【 插入 Div 标签 】 按 设置 其 ID 为 regist; 【 动作 ] 为 “javascript: 
钮 , 分 别 创 建 ID 为 inputLabel、 inputField、 void(null);”。 


inputComment 的 Div 层 , 并 设置 其 CSS 样 
式 属 性 ， 如 图 9-83 所 示 。 


re 
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和 罗 使 
人 了 图 9-85 ,设置 表格 对 象 行距 用 
单 


和 图 9-83_, 插 入 Div 层 


将 光标 置 于 ID 为 inputLabel 的 Div 层 中 ， 
输入 文本 “用 户 名 ”。 选择 该 文本 , 在 【 属 
性 】 检查 器 中 设置 【格式 ] 为 “段落 "。 然 
后 按 【 回 车 】 键 换行 ， 输 入 文本 “密码 ”， 
按照 相同 的 方法 依次 类 推 ,如 图 9-84 所 示 。 : : 

Tm TT TT yo Tog 


9-86 ,插入 表单 


将 光标 置 于 表单 中 ， 单 击 【 插入 】 面板 【 表 
单 】 选项 中 的 【文本 字段 ] 按钮 ， 在 弹出 的 
【输入 标签 辅助 功能 属性 】 对 话 框 中 设置 ID 
为 UserName， 如 图 9-87 所 示 。 


9-84_。 表 单 对 象 名 称 


将 光标 置 于 ID 为 inputComment 的 Div 层 
中 ,输入 文本 。 选 择 该 文本 ,在 【 属性 ] 检 
查 器 中 设置 【 格式 ] 为 “段落 "。 然 后 按 【 回 
车 ] 键 换行 , 再 输入 文本 ,按照 相同 的 方法 
依次 类 推 ， 如 图 9-85 所 示 。 Eee Waiqihox -| 日 画 画 425v4608K70 种 | 


圆 将 光标 置 于 ID 为 inputField 的 Div 层 中 ， 
9-87 __ 插入 表单 对 
单 击 【 插入】 面板 【表单 ] 选 项 中 的 【表单 】 OQ ee- 。 要 
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316, 


加 将 光标 置 于 文本 字段 对 象 后 面 , 在 【属性 】 
检查 器 中 ， 设 置 【 格式 】 为 “段落 "， 为 文 
本 字段 应 用 段落 ， 如 图 9-88 所 示 。 


格式 中 [县 


可 四 无 


和 图 9-88 ,设置 对 象 间距 


在 文本 字段 右 侧 按 Shift+Ctrl+Space 组 合 
键 , 插入 一 个 全 角 空格 。 按 [ 回 车 ] 键 换行 ， 
在 新 的 行 中 插入 一 个 【文本 字段 】 设置 ID 
为 userPass 的 文本 域 ， 并 在 【 属性 】 检查 
器 中 设置 其 【 类 型 】 为 “密码 ”。 用 同样 的 
方法 ,插入 1D 为 rePass 的 重复 输入 密码 域 ， 
并 设置 域 的 类 型 ， 如 图 9-89 所 示 。 
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和 图 9-89_ ,插入 密码 文本 字段 


图 在 重复 输入 密码 域 的 右 侧 插入 全 角 空格 , 再 
按 [ 回 车 ] 键 换行 ,插入 ID 为 emailAddress 
的 文本 域 ， 在 【 属性 】 检查 器 中 , 设置 【 初 
始 值 】 为 “@”。 在 电子 邮件 域 右 侧 插 入 全 
角 空 格 ， 再 按 【 回 车 】 键 换行 ， 如 图 9-90 
所 示 。 
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和 图 9-90_ ,插入 邮箱 地 址 文本 字段 


图 单 击 [插入 面板 【 表单 ] 选项 中 的 【 选择 
列表 /菜单 ] 按钮 ， 插 入 【ID 】 为 bornYear 
的 列表 菜单 。 选 中 列表 菜单 ， 在 【 属性 ] 检 
查 器 中 单 击 【 列表 值 ] 按钮 ， 在 弹出 的 【 列 
表 值 】 对 话 框 中 输入 年 份 列表 的 值 ， 在 列 
表 菜 单 右 侧 输入 一 个 “年 ” 字 ， 如 图 9-91 
所 示 。 


上 了 图 9-91 ,插入 列表 


用 同样 的 方法 插入 一 个 ID 为 bornMonth 的 
列表 菜单 。 选 择 ID 为 bornMonth 的 列表 菜 
单 ， 在 【 属性 ] 检查 器 中 单 击 【 列表 值 ] 按 
钮 ， 在 弹出 的 【 列表 值 ] 对 话 框 中 输入 月 份 
以 及 月 份 的 值 等 菜单 内 容 , 如 图 9-92 所 示 。 
在 列表 菜单 右 侧 输入 一 个 “月 ” 字 ， 完 成 列 
表 菜 单 的 制作 ， 并 按 【 回 车 】 换 行 。 

在 新 的 行 中 插入 ID 为 checkCode 的 验证 码 
文本 域 ， 如 图 9-93 所 示 。 

在 ID 为 checkCode 的 文本 域 右 侧 插入 一 个 
全 角 空格 , 按 【 回 车 】 键 换行 ， 插 入 一 个 文 


本 字段 ， 设 置 文本 域 的 ID 为 introduction。 
然后 , 设置 [ 字符 宽度 ] 为 0;【 行 数 ] 为 6， 
如 图 9-94 所 示 。 


ens (FR S| 
认 你 提 帮 码 。 


用 的 Emailtb 直 ， 以 生 我 们 和 


在 图 9-94 插入 多 行文 本 域 


在 文本 区 域 右 侧 按 [ 回 车 ] 键 换行 , 单 击 [ 插 
入 】 面板 【表单 ] 选项 中 的 【按钮 ] 选项 ， 
如 图 9-95 所 示 。 

在 表单 中 , 插入 ID 为 regBtn 的 按钮 ， 并 在 
【 属性 】 检查 器 中 设置 按钮 的 【 值 ] 为 “ 注 


册 ”， 在 注册 按钮 右 侧 插入 两 个 全 角 空格 ， 
如 图 9-96 所 示 。 


和 图 9-96 ,插入 按钮 


用 同样 的 方式 再 插入 一 个 ID 为 resetBtn 的 
按钮 ,在 【 属性 】 检查 器 中 设置 按钮 的 值 为 
“ 重 置 ”, 【 动作 ] 为 “ 重 设 表单 ”如 图 9-97 
所 示 。 
| 
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9-97_。 插 入 按钮 


分 别 选中 ID 为 userName、userPass、 
rePass 、emailAddress 和 instruction 的 


表单 ， 在 【属性 】 检查 器 中 设置 其 类 


司 灯 手 闹 习习 


站 
建 
设 
9 
a) 


为 “widField”， 将 其 宽度 加 大 ， 如 图 9-98 
所 示 。 


芋 图 9-98 ,设置 样式 


分 别 选中 bornYear 、bornMonth 以 及 
checkCode 等 3 个 表单 ， 在 【 属性 】 检查 
器 中 设置 其 类 为 narrowField， 将 其 宽度 定 
义 为 80px， 如 图 9-99 所 示 。 
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9-99 ,设置 样式 


在 验证 码 的 表单 右 侧 插入 12 个 全 角 空格 ， 
然后 插入 验证 码 的 图 像 ， 如 图 9-100 所 示 。 
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和 图 9-100 ,插入 验证 图 像 


一 、 填 空 题 


1. 表单 是 一 种 特殊 的 网 页 标记 。 使 用 这 些 
网 页 标记 ， 开 发 者 可 以 向 终端 用 户 提供 各 种 类 型 
的 交互 操作 目标 ， 以 快速 捕获 用 户 的 一 些 特殊 交 


互 操作 ， 诸 如 、_ :4 

2. 在 传统 的 或 表单 
提交 方法 体系 下 ， 所 有 数据 的 交互 提交 都 必须 依 
赖 表 单 容器 而 进行 。 


3. HTML 5 通过 来 实现 表单 标 
签 的 功能 ， 并 存储 标签 组 件 的 文本 内 容 。 

4. 在 为 终端 用 户 提供 文件 上 传 功 能 时 ， 需 
要 使 用 输入 组 件 的 。 

5. 为 文本 域 等 表单 添加 下 拉 的 数据 菜单 ， 
需要 使 用 到 ____。 

6. 输入 组 件 提 供 了 4 种 按钮 类 型 ， 包 
括 、 、 以 


及 。 
二 、 选 择 题 
1. 以 下 哪 种 不 属于 Post 方法 的 特性 ? 


人 .请 求 不 会 被 缓存 
B. 请 求 会 被 保留 到 Web 浏览 器 的 历史 
记录 中 
C. 请 求生 成 的 页 面 不 能 被 收藏 到 Web 
浏览 器 的 收藏 夹 中 
D. 请 求 对 数据 的 长 度 没有 要 求 
2. 数据 集 的 作用 不 包括 ? 
A. 为 各 种 交互 组 件 分 组 
B. 为 各 种 交互 组 件 分 列 
C. 对 交互 组 件 进行 归纳 整理 
D. 存储 提交 的 数据 
3. 以 下 哪 种 表单 组 件 无 法 提供 数据 提交 功 
能 ? 


A. 提交 域 要 使 用 到 。 
B. 提交 按钮 A. 文本 区 域 组 件 


C。 图 像 域 B. 输入 组 件 的 文本 域 

D， 按 钮 域 C. 输入 组 件 的 文件 域 

4. 可 提供 拖 蝶 滑 块 功能 的 输入 组 件 是 D. 输入 组 件 的 隐藏 域 

? 

A、 闫 色 域 三 、 简 答题 
B. 电子 邮件 域 1.HTTP 的 数据 提交 方法 主要 包括 哪儿 种 ? 
C. 数字 域 其 之 间 有 什么 区 别 ? 
D， 苑 围 域 _ 2. 数据 集 组 件 的 作用 是 什么 ? 

5. 电话 号 码 域 主要 用 来 验证 __。 3. 输入 组 件 都 有 哪些 类 型 ? 其 作用 都 是 
A. 包含 区 号 的 中 国电 话 号 码 什么 ? 
B. 11 位 中 国手 机 号 码 4. 列表 菜单 标记 的 结构 包含 哪些 内 容 ? 
C. 美国 电话 号 码 5. 输入 组 件 的 按钮 组 件 都 包含 哪儿 种 ?其 
D. 人 PP 电话 号 码 都 有 什么 作用 ? 


6. 在 捕获 终端 用 户 的 大 量 文本 内 容 时 ， 需 


